一. Flex 弹性布局简介
1. CSS 的布局模式
- CSS 拥有多种的布局模式，以应对各种场景下的位置关系
- CSS 主要的布局模式有：
- 块布局
- 行内布局
- 表格布局
- 定位布局
- 浮动布局
- 媒体查询
- Flex 弹性布局
- Grid 网格布局
2. Flex 弹性布局概念
- 弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力
- 弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出
二. Flex 弹性布局实战
1. 相关术语
Flex 弹性布局相关术语
2. 弹性容器
- 使用 Flex 弹性布局需要定义一个容器，表明该容器内部使用 Flex 弹性布局
.box { display: flex; }
.box { display: inline-flex; }
- 设置 Flex 布局以后，子元素的
flex、clear和vertical-align属性将会失效
3. 弹性项目
- 弹性容器的每个子元素都称为弹性项目
- 弹性容器直接包含的文本将被包裹成匿名弹性单元
4. 定义主轴与换行
- 使用
flex-direction在 弹性容器 中定义 Flex 弹性布局的主轴以及主轴方向
.box { flex-direction: row ( default ) | row-reverse | column | column-reverse ; }
row（默认）：主轴为水平，方向为从左至右
row-reverse：主轴为水平，方向为从右至左
column：主轴为垂直，方向为从上至下
column-reverse：主轴为垂直，方向为从下至上
- 使用
flex-wrap在 弹性容器 中定义当 弹性项目 溢出时该如何换行
.box { flex-wrap: nowrap ( default ) | wrap | wrap-reverse ; }
nowrap（默认）：不换行，将会拉伸弹性项目
wrap：正常换行
wrap-reverse：溢出的部分在反方向换行
- 使用
flex-flow属性在 弹性容器 上同时定义flex-direction和flex-wrap属性
.box { flex-flow: <flex-direction> <flex-wrap> ; }
5. 弹性项目的排布
- 使用
justify-content属性在 弹性容器 上定义在当前行上，弹性项目 沿主轴如何排布
.box { justify-content: flex-start ( default ) | flex-end | center | space-between | space-around ; }
flex-start（默认）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：分散对齐，项目两侧的间隔相等
- 使用
align-items属性在 弹性容器 上定义在当前行上，弹性项目 沿侧轴如何排布- 如果 弹性项目 具有实际高度，默认的排布方式为
flex-start - 如果 弹性项目 未设置高度或设为
auto，默认的排布方式为stretch
- 如果 弹性项目 具有实际高度，默认的排布方式为
.box { align-items: flex-start | flex-end | center | baseline | stretch ; }
flex-start：按侧轴的起点对齐
flex-end：按侧轴的终点对齐
center：按侧轴的中点对齐
baseline：按弹性项目第一行文字的基线对齐
stretch：弹性项目将会占满整个弹性容器的高度
- 使用
align-content属性在 弹性容器 上定义在多个主轴的情况下，弹性项目 在侧轴上如何排布
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch ; }
flex-start：按侧轴的起点对齐
flex-end：按侧轴的终点对齐
center：按侧轴的中点对齐
space-between：按侧轴两端对齐，轴线之间的间隔平均分配
space-around：按侧轴分散对齐，每根轴线的两侧间隔都相等
stretch：弹性项目在每个轴上平均占满整个侧轴
6. 弹性项目的顺序
- 使用
order属性在 弹性项目 上定义 弹性项目 的顺序
.flex-item { order: <integer>; } // default: 0
括号内的值为弹性项目的 order 属性值
7. 弹性项目的放大比例
- 使用
flex-grow属性在 弹性项目 上定义 弹性项目 的放大比例 -
flex-grow属性的默认值为 0，即如果存在剩余空间，也不会放大 - 弹性项目将按照各自的
flex-grow属性值成比例的放大
.flex-item { flex-grow: <number>; } // defalut: 0
- 括号内表示弹性项目
flex-grow属性的值
按照 0：2：1 放大
按照 1：1：2 放大
8. 弹性项目的缩小比例
- 使用
flex-shrink属性在 弹性项目 上定义 弹性项目 的缩小比例 -
flex-shrink属性的默认值为 1，即如果空间不足，该弹性项目将会缩小 - 弹性项目将按照各自的
flex-shrink属性值成比例的缩小
.flex-item { flex-shrink: <number>; } // default: 1
按照 0：1：1 缩小
按照 2：1：2 缩小
9. 弹性项目的初始大小
- 使用
flex-basis属性在 弹性项目 上定义 弹性项目 在主轴方向上的初始大小 -
flex-basis属性会根据当前的主轴相应覆盖 弹性项目 的height或width属性
.flex-item { flex-basis: <length> | auto ; } // default: auto
10. 弹性项目的放大缩小和大小的简写
- 使用
flex属性在 弹性项目 上定义flex-grow、flex-shrink和flex-basis属性的简写
.flex-item { flex: <flex-grow> <flex-shrink> <flex-basis> ; }
11. 单个弹性项目在侧轴的排布方式
- 使用
align-self属性在 弹性项目 上定义单个弹性项目如何在侧轴上进行排布，这个定义会覆盖由align-items属性所确立的默认值
