一、伸缩容器和伸缩项目
伸缩容器: 设置了display: flex 的元素，就是伸缩容器。
1.给元素设置: display:flex 或 display:inline-flex，该元素就变为了伸缩容器。
2.display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。
3.一个元素可以同时是:伸缩容器、伸缩项目。
伸缩项目:伸缩容器所有子元素自动成为了伸缩项目。
1.仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
2.无论原来是哪种元素(块、行内块、行内)，一旦成为了伸缩项目，全都会“块状化”。
二、主轴、侧轴方向
1.主轴与侧轴
主轴: 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是:从左到右(左边是起点，右边是终点)。
侧轴: 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是:从上到下(上边是起点，下边是终点)。
2.主轴方向
属性名:flex-direction
常用值如下:
(1) row :主轴方向水平从左到右--默认值
(2) row-reverse :主轴方向水平从右到左。
(3) column:主轴方向垂直从上到下。
(4) column-reverse:主轴方向垂直从下到上。
注意：改变了主轴的方向，侧轴方向也会随之改变
三、主轴对齐方式和换行方式
1.主轴对齐方式
属性名：justify-content
常用值如下:
(1) lex-start:主轴起点对齐。-- 默认值
(2) flex-end:主轴终点对齐
(3) center:居中对齐
(4) space-between:均匀分布，两端对齐(最常用)。
(5) space-around:均匀分布，两端距离是中间距离的一半。
(6) space-evenly :均匀分布，两端距离与中间距离一致。
2.主轴换行方式
属性名：flex-wrap
(1) nowrap：默认值--不换行
(2) wrap：伸缩容器不够时自动换行
(3) wrap-reverse：反向换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
}
.outer {
width: 1000px;
height: 600px;
background-color: gray;
/* 开启flex布局，将该元素变为伸缩容器 */
display: flex;
/* 主轴方向：从左到右 */
/* flex-direction: row; */
/* 主轴换行方式：换行*/
flex-wrap: wrap;
/* 复合属性flex-flow */
/* flex-flow: row wrap; */
/* 主轴对齐方式，主轴的起始位置——默认 */
justify-content: flex-start;
/* 主轴对齐方式，主轴的结束位置 */
justify-content: flex-end;
/* 主轴对齐方式，中间对齐 */
justify-content: center;
/* 主轴对齐方式，项目均匀的分布在一行中，项目与项目之间的距离，是项目距边缘的二倍 */
justify-content: space-around;
/* 主轴对齐方式，项目均匀的分布在一行中，项目与项目之间的距离相等，项目距边缘没有距离 */
justify-content: space-between;
/* 主轴对齐方式，项目均匀的分布在一行中 */
justify-content: space-evenly;
}
.inner {
background-color: skyblue;
width: 200px;
height: 200px;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
</html>四、侧轴对齐方式
（只有一行的情况）
所需属性：align-items
常用值如下:
1.f1ex-start:侧轴的起点对齐。
2.flex-end:侧轴的终点对齐。
3.center:侧轴的中点对齐。
4.baseline:伸缩项目的第一行文字的基线对齐。
5.stretch:如果伸缩项目未设置高度，将占满整个父容器的高度。--(默认值)
( 多行的情况)
所需属性：align-content
常用值如下:
1.flex-start:与侧轴的起点对齐。
2.flex-end:与侧轴的终点对齐。
3.center :与侧轴的中点对齐。
4.space-between:与侧轴两端对齐，中间平均分布。
5.space-around:伸缩项目间的距离相等，比距边缘大一倍。
6.space-evenly:在侧轴上完全平分。
7.stretch:占满整个侧轴。-- 默认值
五、伸缩盒模型——伸
flex-grow 定义伸缩项目的放大比例，默认为0，即:纵使主轴存在剩余空间，也不拉伸(放大)。
规则:
1、若所有伸缩项目的 flex-grow 值都为1，则:它们将等分剩余空间(如果有空间的话)。
2、若三个伸缩项目的 flex-grow值分别为:1、2、3，则:分别瓜分到:1/6、2/6、3/6 的空间。
六、伸缩盒模型——缩
flex-shrink 定义了项目的压缩比例，默认为1，即:如果空间不足，该项目将会缩小。
收缩项目的计算，略微复杂一点，拿一个场景举例:
例如:
三个收缩项目，宽度分别为:200px、300px、200px，它们的f1ex-shrink值分别为:1、2、3
若想刚好容纳下三个项目，需要总宽度为700px，但目前容器只有400px，还差300px
所以每个人都要收缩一下才可以放下，具体收缩的值，这样计算:
1.计算分母:(200*1)+(300*2)+(200*3)=1400
2.计算比例:
项目一:(200x1)/1400=比例值1
项日二:(300x2)/1400=比例值2
项日三:(200x3)/1400=比例值3
3.计算最终收缩大小:
项目一需要收缩:比例值1x300
项目二需要收缩:比例值2x300
项目三需要收缩:比例值3x300
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
}
.outer {
width: 1000px;
height: 600px;
background-color: gray;
/* 开启flex布局，将该元素变为伸缩容器 */
display: flex;
justify-content: flex-start;
}
.inner {
background-color: skyblue;
width: 200px;
height: 200px;
border: 1px solid black;
box-sizing: border-box;
/* 伸 */
flex-grow: 1;
/* 缩 */
flex-shrink: 1;
}
.inner2 {
width: 300px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner">3</div>
</div>
</body>
</html>