布局 flex

作者: 咖咖爱睡觉
来源: 51数据库
2020-09-29

1.以下6个属性设置在容器上
flex-direction row/row-reverse/column/column-reverse 决定主轴的方向（即项目的排列方向）
flex-wrap wrap/nowrap/wrap-reverse 决定项目排列方式
flex-flow | 前两者简写形式，默认flex-flow:row nowrap
justify-content flex-start/flex-end/center/space-between/space-around
决定项目在主轴的对齐方式
* space-between：两端对齐，项目之间的间隔都相等。
* space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items flex-start/flex-end/center/baseline/stretch
定义项目在交叉轴上如何对齐
* baseline: 项目的第一行文字的基线对齐。
* stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content flex-start/flex-end/center/space-between/space-around/stretch 定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

推荐阅读