Flex 布局

Flex 布局，可以简便，完整，响应式的实现各种页面布局

网页布局是CSS中一个重点应用，传统的解决方案是基于盒模型的，它依赖于 标准文档流、浮动布局 和 定位布局。但它在解决一些特殊布局的时候会很不方便，让人很头疼。

Flex 布局

Flex 是 Flexible Box 的缩写，即弹性布局，任何一个容器(块状元素或行内元素)都可以指定为Flex布局。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

基本概念

概念图.png

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴，水平轴和垂直的交叉轴。

属性

Flex container 的属性 ：

1. display : flex;   // 将这个元素设置为弹性盒子

2. flex-direction :   // 主轴方向，即项目的排列方向
    . row
    . row-reverse
    . column
    . column-reverse
    
3. justify-content :     // 沿主轴的对齐方式
    . flex-start    默认，左对齐
    . flex-end     右对齐
    . center        居中
    . space-between   两端对齐，项目之间的间隔相等
    . space-around     每个项目两侧的间隔相等
    
4. align-items :         // 沿侧轴的对齐方式
    . flex-start       起点对齐
    . flex-end        终点对齐
    . center           中点对齐
    .baseline         项目的第一行文字的基线对齐
    . stretch          默认值，如果项目未设置高度或设为auto，将占满整个容器的高度 
    
5. align-content :     // 子元素中文本沿侧轴的对齐方式（只有一行时无效）
    . flex-start       起点对齐
    . flex-end        终点对齐
    . center           中点对齐
    . space-between   两端对齐，间隔平均
    . space-around     每根轴线两侧相等，轴线之间的间隔比轴线与边框的间隔大一倍
    . stretch          默认值，轴线占满整个侧轴

6. flex-wrap :      // 规定如果一条轴线排不下怎么换行
    . nowrap  默认，不换行
    . wrap      换行，第一行在上面
    . wrap-reverse    换行，第一行在下面 

7. flex-flow       // flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

Flex item 的属性 :

1. flex-growth :      // 伸展值, 默认为0，如果所有的都为1，则等分空间

2. flex-shrink :       // 可接受的压缩值，默认为1，设为0则不缩小

3. flex-basis :        // 元素默认的尺寸值

4. flex :   // 以上三个值按顺序的缩写

5. order :    // 项目的排列顺序。数值越小，排列越靠前，默认为0

6. align-self :   // 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto

示例 ：

结构.png 样式.png

效果如下 :

效果.png

该文章同步在 :
CSDN Blog： http://blog.csdn.net/levinhax/article/details/76652783
GitHub Page : https://levinhax.github.io/