CSS弹性盒模型
Flex 是 Flexible Box 的缩写，意为"弹性布局"，可以轻松的控制元素排列、对齐和顺序。
现在的终端类型非常多，使用弹性盒模型可以让元素在不同尺寸终端控制尺寸。
1.弹性布局与传统布局相应对比
<body>
<main>
<nav>
Yooo
nav>
<article>
Alison
article>
main>
body>
传统布局：
* {
padding: 0;
margin: 0;
}
main {
position: relative;
height: 100vh;
}
main nav {
width: 80px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: blueviolet;
}
main article {
background: #ccc;
padding-left: 90px;
background-clip: content-box;
height: 100vh;
}
弹性布局（代码量减小）：
* {
padding: 0;
margin: 0;
}
main {
display: flex;
height: 100vh;
}
main nav {
background: blueviolet;
width: 80px;
}
main article {
background: #ddd;
flex: 1;
}
2.声明弹性盒子
display:flex 块级弹性盒子
display:inline-flex 行级弹性盒子
3.弹性元素
放在容器盒子中的元素即为弹性元素（包括文本）。
- 不能使用float与clear规则
- 弹性元素均为块元素
- 绝对定位的弹性元素不参与弹性布局
4.弹性元素方向
flex-direction:
| 值 | 描述 |
|---|---|
| row | 从左到右水平排列元素（默认值） |
| row-reverse | 从右向左排列元素 |
| column | 从上到下垂直排列元素 |
| column-reverse | 从下到上垂直排列元素 |
article {
display: flex;
border: solid 5px blueviolet;
flex-direction: row-reverse;
}
5.弹性元素溢出换行
flex-wrap:
flex-wrap 属性规定flex容器是单行或者多行。
| 选项 | 说明 |
|---|---|
| nowrap | 压缩，元素不拆行或不拆列（默认值） |
| wrap | 容器元素在必要的时候拆行或拆列。 |
| wrap-reverse | 容器元素在必要的时候拆行或拆列，但是以相反的顺序 |
article {
display: flex;
width: 280px;
margin: 50px;
border: solid 5px blueviolet;
flex-direction: row;
flex-wrap: wrap;
}
6.统一设置方向和换行
flex-flow: flex-direction flex-wrap
article {
display: flex;
width: 280px;
margin: 50px;
border: solid 5px blueviolet;
/* flex-direction: row;
flex-wrap: wrap; */
flex-flow: row wrap;
}
7.轴的概念
主轴：沿着原本排列方向的那条轴。
副轴（交叉轴）：原本排列方向内容溢出换行后与主轴垂直的轴。
（1）水平排列
（2）垂直排列
8.排列方式
（1）主轴元素的多种排列方式
justify-content:
| 选项 | 说明 |
|---|---|
| flex-start | 元素紧靠主轴起点 |
| flex-end | 元素紧靠主轴终点 |
| center | 元素从弹性容器中心开始 |
| space-between | 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 |
| space-around | 每个元素两侧的间隔相等。所以，元素之间的间隔比元素与容器的边距的间隔大一倍 |
| space-evenly | 元素间距离平均分配 |
article {
display: flex;
width: 550px;
height: 250px;
margin: 50px;
border: solid 5px blueviolet;
flex-flow: row wrap;
justify-content: space-evenly;
}
（2）交叉轴元素的多种排列方式
align-items:
控制元素在交叉轴的行上的排列
| 选项 | 说明 |
|---|---|
| stretch | 元素被拉伸以适应容器（默认值） |
| center | 元素位于容器的中心 |
| flex-start | 元素位于容器的交叉轴开头 |
| flex-end | 元素位于容器的交叉轴结尾 |
如果设置了 width | height | min-height | min-width | max-width | max-height ，将影响stretch 的结果，因为 stretch 优先级低于宽高设置。
article {
display: flex;
width: 550px;
height: 550px;
margin: 50px;
border: solid 5px blueviolet;
flex-direction: row;
justify-content: center;
align-items: center;
}
（3）多行元素在交叉轴的排列方式
align-content:
只适用于多行显示的弹性容器，用于控制行（而不是元素）在交叉轴上的排列方式。
| 选项 | 说明 |
|---|---|
| stretch | 将空间平均分配给元素 |
| flex-start | 元素紧靠主轴起点 |
| flex-end | 元素紧靠主轴终点 |
| center | 元素从弹性容器中心开始 |
| space-between | 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 |
| space-around | 每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 |
| space-evenly | 元素间距离平均分配 |
（4）单个元素在交叉轴的排列方式
align-self:
用于控制单个元素在交叉轴上的排列方式，align-items 用于控制容器中所有元素的排列，而 align-self 用于控制一个弹性元素的交叉轴排列。
| 选项 | 说明 |
|---|---|
| stretch | 将空间平均分配给元素 |
| flex-start | 元素紧靠主轴起点 |
| flex-end | 元素紧靠主轴终点 |
| center | 元素从弹性容器中心开始 |
article :first-child {
align-self: flex-start;
}
9.弹性元素可用空间分配
flex-grow:
用于将弹性盒子的可用空间，分配给弹性元素。可以使用整数或小数声明。（计算：剩余的空间按照比例平分）
article div:nth-child(1) {
flex-grow: 0;
}
article div:nth-child(2) {
flex-grow: 1;
}
article div:nth-child(3) {
flex-grow: 3;
}
10.弹性元素动态缩小
flex-shrink:
与 flex-grow 相反 flex-shrink 是在弹性盒子装不下元素时定义的缩小值。
article div:nth-child(1) {
flex-shrink: 0;
}
article div:nth-child(2) {
flex-shrink: 1;
}
article div:nth-child(3) {
flex-shrink: 3;
}
11.主轴的基准尺寸的定义
flex-basis:
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。
优先级：max-width(height)/min-width(height)>flex-basis>width/height
article * {
flex-basis: 100px;
width: 100px;
height: 50px;
background: red;
background-clip: content-box;
padding: 10px;
box-sizing: border-box;
font-size: 35px;
color: white;
border: solid 1px blueviolet;
}
12.弹性元素组合规则定义
flex:flex-grow flex-shrink flex-basis
13.控制弹性元素的排序
order:
用于控制弹性元素的位置，默认为 order:0 。数值越小越在前面，可以负数或整数。
article :nth-child(1) {
order: 1;
}
article :nth-child(2) {
order: 2;
}
article :nth-child(3) {
order: -5;
}
14.定位元素在弹性布局中的表现
（1）绝对定位
绝对定位的弹性元素不参与弹性布局
article :nth-child(1) {
background-color: #000;
position: absolute;
left: 100px;
top: 200px;
}
（2）相对定位
相对定位的元素因为保留位置，所以参与布局。
article :nth-child(1) {
background-color: #000;
position: relative;
}
15.弹性布局中使用margin自动撑满空间
在弹性布局中对弹性盒子使用margin-right:auto 等形式可以自动撑满空间。
ul:nth-child(1) {
display: flex;
/* 让菜单ul自动填满右侧 */
margin-right: auto;
}
