前端开发Flex布局

Flex布局提供了元素在容器中的对齐，方向以及顺序。

1.主轴和侧轴

flex-direction

• row 从左到右水平方向为主轴。
• row-reverse 从右到左水平方向为主轴。
• column 从上到下垂直方向为主轴。
• column-reverse 从下到上垂直方向为主轴。

2.对齐

主轴：justify-conent

• flex-start 起点对齐（默认）。
• flex-end 结束点对齐。
• center 居中。
• space-between 两端对齐。
• space-around 子节点之间距离相等。

侧轴：align-items

• stretch 填充整个容器（默认值）。
• flex-start 起点对齐。
• flex-end 结束点对齐。
• center 居中对齐。
• baseline 以子节点为标准的第一行文字对齐。