一、概述

1. Flex 布局就是弹性布局。任何一个容器都可以指定为 Flex 布局。
2. 设置为 Flex 布局后，子元素的 float、clear、vertical-align 属性失效。
3. 开启了 Flex 布局的元素叫 flex container，它里面的直接子元素叫 flex items。
4. flex container 默认有两条轴：主轴和交叉轴。

二、flex container

• 应用在 flex container 上的属性：
• flex-flow：flex-direction 和 flex-wrap 的缩写。
• flex-direction：决定主轴的方向。
• flex-wrap：决定 flex container 单行还是多行。
• justify-content：决定了 flex items 在主轴上的对齐方式。
• align-items：决定了 flex items 在交叉轴上的对齐方式。
• align-content：决定了多根轴线的对齐方式。