弹性盒子是 CSS3 的一种新的布局模式.，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
主轴：表示水平方向
侧轴（交叉轴、副轴）：表示垂直方向
弹性盒子（项目）：表示要操作的元素
将父元素设置成弹性盒子容器
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
子元素默认为主轴方向显排列
两种方式
display:flex;
让块级元素并列，成为块级元素
父元素本身的显示方式类似于display:block;
display:inline-flex;
让块级元素并列，成为行内块级元素
父元素本身的显示方式类似于display:inline-block;
例1：
display:flex
css样式代码:
.box{
/* 为了体现出设置弹性盒子的两种方式 ，不设置宽高*/
/* width: 1000px;
height: 400px; */
border: 1px solid #000;
display: flex; /*父元素本身的显示方式类似于display:block;*/
}
/* 匹配div并带有id属性 属性值是以child开头的元素 */
div[id^="child"]{
width: 200px;
height: 200px;
}
#child1{
background-color: #f00;
}
#child2{
background-color: #0f0;
}
#child3{
background-color: #00f;
}
#child4{
background-color: #f0f;
}
html代码：
<div class="box">
<div id="child1">child1</div>
<div id="child2">child2</div>
<div id="child3">child3</div>
<div id="child4">child4</div>
</div>
运行结果：
可见使用display:flex将父元素设置为弹性盒子容器会将父盒子以块级元素进行显示，子元素以水平方式排列（主轴）
例2：
display:inline-flex
css样式代码:
.box{
/* 为了体现出设置弹性盒子的两种方式 ，不设置宽高*/
/* width: 1000px;
height: 400px; */
border: 1px solid #000;
display: inline-flex; /*父元素本身的显示方式类似于display:inline-block*/
}
/* 匹配div并带有id属性 属性值是以child开头的元素 */
div[id^="child"]{
width: 200px;
height: 200px;
}
#child1{
background-color: #f00;
}
#child2{
background-color: #0f0;
}
#child3{
background-color: #00f;
}
#child4{
background-color: #f0f;
}
html代码：
<div class="box">
<div id="child1">child1</div>
<div id="child2">child2</div>
<div id="child3">child3</div>
<div id="child4">child4</div>
</div>
运行结果：
使用display: inline-flex;将父元素设置为弹性盒子容器会将父盒子以行内块级元素进行显示，子元素以水平方式排列（主轴）
操作子盒子的排列方向
如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用
格式：
flex-direction: row|row-reverse|column|column-reverse;
| 值 | 作用 |
|---|---|
| row | 默认值，水平方向排列（主轴） |
| row-reverse | 水平方向主轴反转 |
| column | 垂直方向排列（侧轴） |
| column-reverse | 垂直方向侧轴反转 |
设置子元素在主轴方向上的 对齐方式
格式：
justify-content:flex-start|flex-end|space-between|space-around;
| 值 | 作用 |
|---|---|
| flex-start | 设置子元素在主轴上起点对齐（默认值） |
| flex-end | 设置子元素在主轴上终点对齐 |
| space-between | 把剩余的父元素空间填充到子元素之间 |
| space-around | 把剩余的空间平均分布到每个子元素左右两侧 |
设置子元素副轴方向上的 对齐方式
这种方式涉及到基线对齐问题
什么是基线？
格式：
align-items:stretch|flex-start|flex-end|center|baseline;
| 值 | 作用 |
|---|---|
| stretch | 默认值，拉伸子元素，填充父元素的高度 （当子项目设定高度时，默认的stretch效果和flex-start是一致的） |
| flex-start | 副轴起点对齐 |
| flex-end | 副轴终点对齐 |
| center | 副轴居中对齐 |
| baseline | 副轴基线对齐 |
默认情况下，项目都排在一条线（又称"轴线"）上，flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向
格式：
flex-wrap:nowrap|wrap|wrap-reverse;
| 值 | 作用 |
|---|---|
| nowrap | 默认值，不换行 （子元素会自动缩小，以适应父元素的大小。如果还是不够，则溢出） |
| wrap | 当父元素空间不足时，子元素会自动向下换行 |
| wrap-reverse | 当父元素空间不足时，子元素会自动向上换行 |
》扩展
flex-flow属性（flex-direction属性和flex-wrap属性的简写）
格式：
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
align-content 该属性作用于在多行轴线时的对齐方式，如果只有一条该属性无效，可用align-items
格式：
align-content :stretch|flex-start|flex-end|center|space-between|space-around;
| 值 | 作用 |
|---|---|
| stretch | 默认值。元素被拉伸以适应容器 |
| flex-start | 元素位于容器的开头（多条轴线处于紧贴状态） |
| flex-end | 元素位于容器的底部（多条轴线处于紧贴状态） |
| center | 元素位于容器的中心（多条轴线处于紧贴状态） |
| space-between | 多条轴线之间都平均留有空白 |
| space-around | 各轴之前、之间、之后都平均留有空白 |
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
格式
order: <integer>;
例：
css代码：
*{
margin: 0px;
padding: 0px;
}
.box-father{
width: 1000px;
height: 500px;
border: 1px red solid;
margin: 50px auto;
/* 设置弹性盒子容器 */
display: flex;
}
.box-father div{
width: 300px;
height: 200px;
border: 1px red solid;
background-color: #6996C4;
}
.box-son1{
order: 1;
/* 设置子元素的排列顺序 值越大越靠后 */
}
.box-son3{
/* 支持负数 */
order: -1;
}
html代码：
<div class="box-father">
<div class="box-son1">box-son1</div>
<div class="box-son2">box-son2</div>
<div class="box-son3">box-son3</div>
<div class="box-son4">box-son4</div>
<div class="box-son5">box-son5</div>
</div>
运行结果：
当父元素有多余空间时，给子元素设置flex-grow子元素则会按比例来去分配
注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用
格式
flex-grow: number;（默认值为0，不支持负数）
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
当父元素的宽度小于所有子元素的宽度的总和时（即子元素会超出父元素），不设置则会平均缩小子元素。
格式
flex-shrink:number;（默认值为1，不支持负数）
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
格式
flex-basis: <length> | auto; （默认值为auto）
length：该值可以是像素px，也可以是百分数%，百分数就是相对于其父弹性盒容器的宽或者高（取决于主轴方向）
（不支持负数）
注意：当flex-basis和width属性同时存在时，width属性不生效，该项目的宽度为flex-basis设置的宽度
通俗易懂的文章：
https://blog.csdn.net/m0_37058714/article/details/80765562
》扩展
flex属性（flex-grow, flex-shrink 和 flex-basis的简写）
格式
flex:flex-geow|flex-shrink|flex-basis;
（默认值为0 1 auto。后两个属性可选）
该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
格式
align-self: auto | flex-start | flex-end | center | baseline | stretch;
| 值 | 作用 |
|---|---|
| auto | 默认值，跟随父元素的align-items属性，如果没有父元素，则等同于stretch |
| flex-start | 位于副轴的起始位置 |
| flex-end | 位于副轴的结束位置 |
| center | 位于副轴的中间位置 |
| baseline | 根据基线进行对齐 |
| stretch | 如果项目未设置高度或设为auto，将占满整个容器的高度，元素被拉伸以适应容器 |
如有错误还请指出，希望这篇文章能给予你们帮助！