在 css 中除了使用浮动和定位进行布局，还可以使用弹性布局。通过弹性容器和弹性项目，弹性布局可以让网页元素在容器内自由调整大小和位置，以适应不同的屏幕尺寸和设备类型。
.container {
display: flex;
}
采用 Flex 布局的元素被称为 Flex 容器，它的子元素被称为 Flex 项目。
1.主轴和交叉轴
容器默认存在两条轴：主轴和交叉轴。
主轴是内部子元素排列的方向，主轴可以是水平的，也可以是垂直的。其中，交叉轴跟主轴垂直。
2.容器的属性
- flex-direction
定义了项目在容器内的方向
flex-direction: row;//默认值，从左到右
flex-direction: row-reverse;//从右到左
flex-direction: column; //从上到下
flex-direction: column-reverse; //从下到上
- flex-wrap
默认情况下，所有项目都会尽量放在一行上。您可以使用此属性更改此设置，并允许项目根据需要换行。
flex-wrap: nowrap; //默认值，所有项目将位于一行
flex-wrap: wrap;//当空间不足时，从上到下换行到多行。
flex-wrap: wrap-reverse;//当空间不足时，从下到上换行到多行。
- flex-flow
是 flex-direction 和 flex-wrap 的简写形式。当 flex-grow 之和⼩于 1 时，只能按⽐例分配部分剩余空间，⽽不是全部。
flex-flow: column wrap;
- justify-content
定义了主轴上的对齐方式
justify-content: flex-start; //默认值，左对⻬
justify-content: flex-end; //右对⻬
justify-content: center; //居中
justify-content: space-between; //两端对⻬，项⽬之间的间隔都相等
justify-content: space-around; //两个项⽬两侧间隔相等
- align-items 定义项目在交叉轴上如何对齐
align-items: flex-start; //交叉轴的起点对⻬
align-items: flex-end; //交叉轴的终点对⻬
align-items: center; //交叉轴的中点对⻬
align-items: stretch;//默认值,如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度
align-items: baseline; //项⽬的第⼀⾏⽂字的基线对⻬
- align-content
定义了多根轴线的对⻬⽅式。如果项⽬只有⼀根轴线，该属性不起作⽤
align-items: flex-start; //与交叉轴的起点对⻬
align-items: flex-end; //与交叉轴的终点对⻬
align-items: center; //与交叉轴的中点对⻬
align-items: stretch;//默认值,轴线占满整个交叉轴
align-items: space-between; //与交叉轴两端对⻬，轴线之间的间隔平均分布
align-items: space-around; //每根轴线两侧的间隔都相等。所以，轴线之间的间隔⽐轴线与边框的间隔⼤⼀倍
3.子元素属性
- order：定义 item 排列顺序，越⼩越靠前，默认 0。
- flex-grow：定义项⽬的放⼤⽐例，默认为 0，即如果存在剩余空间，也不放⼤。
- flex-shrink：定义了项⽬的缩⼩⽐例（容器宽度<元素总宽度时如何收缩），默认为 1，即如果空间不⾜，该项⽬将缩⼩。flex 元 素仅在默认宽度之和⼤于容器的时候才会发⽣收缩，其收缩的⼤⼩是依据 flex-shrink 的值。
- flex-basis：定义分配多余空间前，占据主轴空间 默认 auto。元素在主轴上的初始尺⼨，所谓的初始尺⼨就是元素在 flex-grow 和 flex-shrink ⽣效前的尺⼨。
- flex:是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。优先使⽤这个属性，⽽不是单独写三个分离的属性，因为浏览器会推算相关值。
flex: 1 = flex: 1 1 0%
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto //常⽤于固定尺⼨不伸缩
- aline-self：默认值为 auto，表示继承⽗元素的 align-items 属性，如果没有⽗元素，则等同于 stretch。允许单个项⽬有与其他项⽬不⼀样的对⻬⽅式，可覆盖 align-items 属性。
与传统的布局方式相比，Flex 布局更加易于理解和使用，是现在常用的布局方式,广泛应用在响应式布局方面，灵活使得 flex 布局会让页面布局工作变得更加轻松便捷。
