Flex布局

Flex布局干什么用？

常常会因为元素居中之类的问题苦恼，这时就可以借助Flex（Flexible Box），它为盒状模型提供强大的灵活性。

基本概念

采用Flex布局的元素，称为Flex容器，简称“容器”，容器子元素称为Flex项目，简称“项目”。

两轴：主轴（main axis）、交叉轴（cross axis）；

两轴起始位置：main start和main end、cross start和cross end；

属性

display:other values | flex | inline-flex;

• css的columns在伸缩容器上没有效果

• float、clear和vertical-align在伸缩项目上没有效果

属性

容器属性

属性	说明	特性
flex-direction	主轴方向	排列
flex-wrap	项目换行效果	排列
flex-flow	flex-direction和flex-wrap复合属性	排列
justify-content	定义伸缩项目沿着主轴线的对齐方式	对齐
align-items	定义子项在容器内沿侧轴线的对齐方式	对齐
align-content	调准伸缩行在伸缩容器里的对齐方式	对齐

项目属性

属性	说明	特性
order	控制伸缩项目在他们的伸缩容器出现的顺序	排列
flex-grow	定义子项宽度之和不足父元素宽度时，子项拉伸的比例	面积
flex-shrink	定义子项宽度之和超过父元素宽度时，子项缩放的比例	面积
flex-basis	定义子项的初始宽度，若子项宽度之和超过父元素宽度时，子项按照flex-basis的比例缩放	对齐
flex	flex-grow、flex-shrink、flex-basis缩写	面积
align-self	定义单个子项与其他项目不一样的对齐方式	对齐

图解容器属性

1. flex-direction(创建主轴，定义项目的方向)

   flex-direction: row | row-reverse | column | column-reverse;

   

row(默认值)：在“ltr”排版方式下从左向右排列；在“rtl”排版方式下从右向左排列。

1. flex-wrap(项目换行)

   flex-wrap: nowrap | wrap | wrap-reverse;

   

2. flex-flow(复合属性)

   flex-flow: flex-direction || flex-wrap

3. justify-content(定义伸缩项目沿着主轴线的对齐方式)

   justify-content: flex-start | flex-end | center | space-between | space-around;

   

4. align-items(定义伸缩项目可以在伸缩容器的当前行的侧轴上对齐方式)

   align-items: flex-start | flex-end | center | baseline | stretch;

   

5. align-content(调准伸缩行在伸缩容器里的对齐方式)

   align-content: flex-start | flex-end | center | space-between | space-around | stretch;

   

请注意本属性在只有一行的伸缩容器上没有效果

项目属性

1. order(控制伸缩项目在他们的伸缩容器出现的顺序)

   order:[integer] /* 传入整数，default 0 */

   

2. flex-grow(定义子项宽度之和不足父元素宽度时，子项拉伸的比例)

   flex-grow:[number] // 传入数字,default 0

   

3. flex-shrink(定义子项宽度之和超过父元素宽度时，子项缩放的比例)

   flex-shrink:[number] // 传入数字， default 1

   

4. flex-basis(定义子项的初始宽度，若子项宽度之和超过父元素宽度时，子项按照flex-basis的比例缩放)

   flex-basis: [length] | [percentage]  | auto; /* default auto*/

   

5. flex(flex-grow、flex-shrink、flex-basis缩写)
   flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

6. align-self(定义单个子项与其他项目不一样的对齐方式)

   align-self: auto | flex-start | flex-end | center | baseline | stretch;

参考资料

Flex 布局教程：语法篇
一个完整的Flexbox指南
不再混淆，一次搞懂！图解flexbox十余个属性