适用端 & 布局原理

父项属性

box-sizing: border-box; 盒模型

flex-direction direction译=方向	- row（默认值）：主轴为水平方向，起点在左端。 - row-reverse：主轴为水平方向，起点在右端。 - column：主轴为垂直方向，起点在上沿。 - column-reverse：主轴为垂直方向，起点在下沿。
justify-content	- flex-start（默认值）：左对齐 - flex-end：右对齐 - center：居中 - space-between：两端对齐，项目之间的间隔都相等。 - space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items align译=对齐	- flex-start：交叉轴的起点对齐。 - flex-end：交叉轴的终点对齐。 - center：交叉轴的中点对齐。 - baseline: 项目的第一行文字的基线对齐。 - stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-wrap	- nowrap - wrap	默认值。规定灵活的项目不拆行或不拆列。