flex布局总结

一、定义及思想

定义：弹性布局盒模型
思想：给予容器控制内部元素高度和宽度的能力

二、兼容性

移动端可以使用
注意加上前缀

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
display: -webkit-flex;
display: flex;

三、概念示意图

• 容器container设置：display:flex
• 内部元素自动成为flex项目item
• container拥有两条隐形的轴：main axis(水平主轴) 和 cross axis(竖直交叉轴)
• item按主轴或交叉轴排列，在主轴方向占据的宽度为main size，在交叉轴方向占据的宽度为cross size
• 注意点：flex容器内元素item的float、clear、vertical-align均失效

四、容器属性详解

1、flex-direction

决定主轴方向

~属性值

• row(默认)：主轴水平，从左到右
• column：主轴竖直，从上到下
• row-reverse：主轴水平，从右到左
• column-reverse：主轴竖直，从下到上

2、flex-wrap

决定当一行排列不下时，是否换行

• nowrap(默认)：自动缩小项目，不换行
• wrap：换行，且第一行在上方
• wrap-reverse：换行，且第一行在下方

3、flex-flow

flex-direction和flex-wrap的结合写法

默认值：row nowrap

4、justify-content

决定item在主轴上的对齐方式

• flex-start(默认)：左对齐
• flex-end：右对齐
• center：主轴方向居中对齐
• space-between：两端对齐
• space-around： 沿轴线均匀分布

5、align-items

决定item在交叉轴上的对齐方式

• flex-start(默认)：顶端对齐
• flex-end：底部对齐
• center：交叉轴方向居中对齐
• baseline： item第一行文字的底部对齐
• stretch：当item未设置高度时，item将和容器等高对齐

6、align-content

当有多条主轴、item不止一行时，决定多行在交叉轴上的对齐方式。定义此属性后，align-items将失效

• flex-start(默认)：顶端对齐
• flex-end：底部对齐
• center：交叉轴方向居中对齐
• space-between：交叉轴方向两端对齐
• space-around： 沿交叉轴均匀分布
• stretch：当item未设置高度时，沿交叉轴拉伸宽度并占满

五、内部元素属性详解

1、order

值为整数，默认为0，值越小，排列越靠前

2、flex-grow

定义当容器有多余空间时，item是否放大
默认值为0，不放大
值为整数，表示item的放大比例

3、flex-shrink

定义当容器空间不足时，item是否缩小
默认值为1，自动缩小
值为整数，表示item的缩小比例

4、flex-basis

表示item在主轴上占据的空间，默认值为auto

5、flex

flex-grow、flex-shrink、flex-basis简写

6、align-self

允许item有自己独特的交叉轴上的对齐方式

• auto(默认)：继承父元素align-items
• flex-start: 顶部对齐
• flex-end：底部对齐
• center：交叉轴方向居中对齐
• baseline： item第一行文字的底部对齐
• stretch：当item未设置高度时，item将和容器等高对齐