Flex布局属性总结

1）Flex布局父容器属性

flex-direction / flex-wrap / flex-flow / justify-content / align-items / align-content

1》水平（主轴上）对齐方式：

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

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，子元素间隔相等。

space-around：子元素两侧的间隔相等。

 

2》十字交叉轴上对齐方式

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

flex-start：上对齐。

flex-end：下对齐。

center：交叉轴对齐。

baseline: 第一行文字的基线对齐。

stretch（默认值）：如果子元素未设置高度或设为auto，将占满整个容器。

 

3》项目排列方向

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

row（默认值）：从左1/2/3/...。

row-reverse：从左../3/2/1。

column：从上1/2/3/...。

column-reverse：从上../3/2/1。

 

4》换行方式

flex-wrap：nowrap（不换行） | wrap（向下换） | wrap-reverse（向上换）;

5》flex-flow

flex-direction和flex-wrap的简写

flex-flow：row nowrap

 

6》多根轴线的对齐方式

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

flex-start：上对齐。

flex-end：下对齐。

center：居中对齐。

space-between：两端对齐，间隔平均。

space-around：间隔相等。

stretch（默认值）：占满。

2）Flex布局子元素属性

order/flex-grow/flex-shrink/flex-basis/flex/align-self

1》order属性（num）

order定义自身排列顺序。数值越小，越靠前，默认为0。-1/0/1/2/3/...

2》flex-grow属性（num）

flex-grow 定义自身放大比例，默认为0不放大。例如：1/2/1=25%:50%:25%

3》flex-shrink属性（num）

flex-shrink定义了空间不足时自身缩小比例，默认为1自动缩小，0不缩小。

4》flex-basis属性

flex-basis定义最小空间，默认值为auto，即自身的本来大小。

5》flex属性

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

6》align-self属性

align-self定义自身对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

3）Flex兼容性

//Webkit内核的浏览器，必须加上-webkit前缀。
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}