弹性布局

弹性布局
一、基础概念

\1. 开启弹性布局的元素叫弹性容器，容器内直接子元素叫弹性项。

\2. 弹性布局分为两条轴：主轴、侧轴。

\3. 默认主轴水平向右，侧轴垂直向下；修改主轴方向会同步改变侧轴。

二、容器属性（写在父元素）

\1. display

flex：块级弹性容器，独占一行
inline-flex：行内弹性容器，同行显示
\2. flex-direction 控制主轴方向

水平正向、水平反向、垂直正向、垂直反向
\3. flex-wrap 控制子元素是否换行

不换行：空间不足自动压缩子元素宽度
正常换行：空间不够自动换到下一行
反向换行：换行后颠倒上下行顺序
\4. flex-flow
direction与wrap两个属性的合并简写

\5. justify-content 主轴对齐方式

靠起点对齐、靠终点对齐、居中对齐
两端对齐，中间均分空白
每个元素两侧空隙相等
所有空隙完全均等