flex布局总结

参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

flex布局总结：

任何一个元素都可以使用flex布局，块级元素.box{display:flex}，行内元素为.box{display: inline-flex};

容器有六大属性

1、flex-direction  ：row、row-reverse、column、column-reverse

①、（默认）row，水平轴的方向，起点在左端

②、row-reverse，水平轴的方向，起点在右端（flex-direction:row-reverse）

flex-direction:row-reverse

③、column，垂直方向，起点在上端

flex-direction:column

④、column-reverse   垂直方向，起点下端

flex-direction:column-reverse

2、flex-wrap   如何换行

①、（默认）nowrap：不换行

flex-wrap:nowrap

②、wrap 换行（第一行在上面）（中间空那么多是因为第二行与第一行的间距和第二行与下边框间距相等）

flex-wrap:wrap

③、wrap-reverse 换行（第一行在下面，起点在纵轴下边）

flex-wrap:wrap-reverse

3、flex-flow：为flex-direction和flex-wrap的缩写

    默认为flex-flow：row nowrap

4、justify-content：水平轴的对齐方式

①、（默认）flex-start：左对齐

②、flex-end：右对齐

③、center：居中对齐

④、space-between：两端对齐（元素之间距离相等）

⑤、space-around：每个元素两侧间隔相等，所以元素之间的间隔比元素与边框间隔大一倍

5、align-items：纵轴对齐方式

①、flex-start：纵轴起点对齐

②、flex-end：纵轴终点对齐

③、center：纵中点对齐

④、baseline 项目的第一行文字的几线对齐

⑤、（默认）stretch如果项目没有设置高度或者高度为auto，则将占满

6、align-content：多根轴线的对齐方式，如果只有一根轴线则该属性无效（多行）

①、flex-start：与纵轴起点对齐

②、flex-end：与纵轴终点对齐

③、center：与纵轴中点对齐

④、space-between：与纵轴两端对齐，轴线之间间隔平均分布

⑤、space-around：每根横轴两侧的间隔相等，所以横轴之间的间隔比横轴与边框的距离大一倍

⑥、stretch：如果元素没有设置高度或者为auto。将沾满整个容器

二、元素的属性

1、order：属性定义元素的排列顺序，数值越小，排列越靠前 order：integer（整数）

②、flex-grow：元素的放大比例，默认为0，即如果剩余空间也不放大 flex-grow:number

5

3、flex-shrink：number 元素缩小比例，默认为1，即如果空间不足将会缩小

4、flex-basis：length/auto在分配多余空间之前，元素占据的主轴空间，浏览器根据这一属性，计算主轴是否有空余空间，默认为auto，即元素本来的大小。它可以设为跟width和height一样的值（如10px）即项目占据固定空间

5、flex：flex-grow flex-shrink  flex-basis（0 1 auto）建议优先使用该属性

6、align-self：auto | flex-start | flex-end | center | baseline | stretch;

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。