flex 基本了解

采用flex布局的元素，成为flex容器（flex container）。在flex容器内部的子元素称为项目（flex item）。

flex布局最基本的支撑是：水平主轴（main axis），竖直交叉轴（cross axis）。

flex布局需要注意的一个地方：flex item的float，clear，vertical-align属性失效。

 

flex container的主要属性

1. flex-direction: 取值范围有row | row-reverse | column | column-reverse。决定主轴方向，水平还是竖直为主轴。

2. flex-wrap: 取值范围有nowrap | wrap | wrap-reverse。定义了flex item轴线上排不下时，如何换行。

3. flex-flow: 前两者的综合。

4. justify-content: 取值范围有flex-start | flex-end | center | space-between | space-around。定义了flex item主轴上的对齐方式。

5. align-items: 取值范围有flex-start | flex-end | center | baseline | stretch。定义flex item在交叉轴如何对齐。

6. align-content: 取值范围有flex-start | flex-end | center | space-between | space-around | stretch。这个省略，暂时没摸过。

 

flex item的主要属性

1. order 取值范围有 一切integer，竖直越小排列靠前。默认为0。定义flex item排列顺序。

2. flex-grow 取值范围有 一切integer，越大占有剩余空间越大。默认为0。定义flex item放大比列，放大规则是等分剩余空间。

3. flex-shrink 取值范围有 一切integer，越大缩小的越多。默认为1，0时不缩小。

4. flex-basis 占据固定空间

5. flex flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

6. align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。可以灵活的控制单个flex item，个人认为这个很不错。

 

看以上属性效果，[点击]https://www.cnblogs.com/xiaobaiv/p/9020335.html