弹性布局（flex布局）

弹性盒子(flex)

声明定义

1. display:flex
2. display:inline-flex

控制盒子元素的排列方向

1. flex-direction: row; 从左到右水平排列元素（默认值）
2. flex-direction:row-reverse 从右向左排列元素
3. flex-direction:column 从上到下垂直排列元素
4. flex-direction:column-reverse 从下到上垂直排列元素

控制盒子的拆行

1. flex-wrap：nowrap 元素不拆行或不拆列（默认值）
2. flex-wrap：wrap 容器元素在必要的时候拆行或拆列。
3. flex-wrap：wrap-reverse 容器元素在必要的时候拆行或拆列，但是以相反的顺序

flex-flow

flex-flow 是flex-direction和flex-wrap的简写组合模式

justify-content(主轴)

用于控制元素在主轴上的排列方式。
主轴 flex-direction 交叉轴 flex-wrap

1. justify-content:flex-start 元素紧靠主轴起点
2. justify-content:flex-end 元素紧靠主轴终点
3. justify-content:center 元素从弹性容器中心开始
4. justify-content:space-between 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
5. justify-content:space-around 每个元素两侧的间隔相等。所以，元素之间的间隔比元素与容器的边距的间隔大一倍
6. justify-content:space-evenly 元素间距离平均分配

align-items与align-content(交叉轴)

align-items

1. align-items:stretch 元素被拉伸以适应容器（默认值）

优先级 stretch < width height

2. align-items:center 元素位于容器的中心
3. align-items:flex-start 元素位于容器的交叉轴开头
4. align-items:flex-end 元素位于容器的交叉轴结尾

align-content

1. align-content:stretch 将空间平均分配给元素(默认值)
2. align-content:flex-start 元素紧靠主轴起点
3. align-content:flex-end 元素紧靠主轴终点
4. align-content:center 元素从弹性容器中心开始
5. align-content:space-between 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
6. align-content:space-around 每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
7. align-content:space-evenly 元素间距离平均分配

弹性元素

放在容器盒子中的元素即为容器元素。

• 不能使用float与clear规则
• 弹性元素均为块元素
• 绝对定位的弹性元素不参与弹性布局