【web】弹性布局

实现弹性布局的前提

父元素设置display：flex；

设置主轴方向

• flex-direction：row；（默认，起点在左端）
• flex-direction：row-reverse；（起点在右端）
• flex-direction：column；（竖直方向，起点在上方）
• flex-direction：column-reverse；（竖直方向，起点在下边）

设置子元素是否换行

• flex-wrap：no-wrap；（默认，不换行）
• flex-wrap：wrap；（换行，第一行在上方）
• flex-wrap：wrap-reverse；（换行，第一行在下方）

主轴对齐方式

• justify-content：flex-start；（轴起点对齐）
• justify-content：flex-end；（轴终点对齐）
• justify-content：center；（居中）
• justify-content：space-between；（两端对齐，中间元素间隔相等）
• justify-content：space-around；（每个元素之间间隔相等）
• justify-content：space-evenly；（每个元素之间间距相等）

交叉对齐方式

• align-items：flex-start；（轴起点对齐）
• align-items：flex-end；（轴终点对齐）
• align-items：center；（居中）
• align-items：baseline；（文本下对齐）

调整换行对齐方式

align-content：

flex和flex-grow

分配剩余空间或者设置子元素的比例