Flex 布局

基本概念

采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。

• main start/main end：主轴开始位置/结束位置；
• cross start/cross end：交叉轴开始位置/结束位置；
• main size/cross size：单个项目占据主轴/交叉轴的空间

容器属性

设置在容器上的属性有6种。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-item
• align-content

flex-direction属性

决定主轴的方向（即项目的排列方向）

• row（默认）：主轴水平方向，起点在左端；
• row-reverse：主轴水平方向，起点在右端；
• column：主轴垂直方向，起点在上边沿；
• column-reserve&#