弹性布局作为css中一种强大的布局模式，可以简便，灵活，响应式的实现多种布局。在解决一维布局的问题上非常好用，同样也是css中极为重要的知识点，在前端面试题中屡见不鲜，下面就让我们来一步步掌握它吧。
FlexBox的基本概念
采用Flex布局的元素，被称为Flex容器,在其内部定义的子元素被称为Flex项目,容器中默认存在两条轴：主轴和交叉轴，通俗来讲也可以理解为空间直角坐标系中的x轴和y轴。
Flex的容器属性
1.display：定义是否为flex容器
首先我们创建一个基本的盒子模型：
<!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>
.container{
border: 3px solid black;
}
.box{
border: 1px solid black;
width: 100px;
height: 50px;
margin: 8px;
};
</style>
</head>
<body>
<div class="container">
<div class="box box1" style="background-color: rgb(244, 97, 97);">
<div class="item">item1</div>
</div>
<div class="box box2" style="background-color: rgb(249, 249, 119);">
<div class="item">item2</div>
</div>
<div class="box box3" style="background-color: rgb(117, 117, 249);">
<div class="item">item3</div>
</div>
</div>
</body>
</html>
下面我们把它设置为弹性：
.container{
display: flex;
border: 3px solid black;
}
这里的display：flex将container设置成为了一个块级弹性容器，它会独自占据页面的一整行。
还有一种就是display:inline-item，它会将我们选定的类设定为一个内联弹性容器，它并不会和块级弹性容器一样占据一行而是类似于行内块元素会根据内容的多少和其他元素一起在一行内排列。
.container{
display: inline-flex;
border: 3px solid black;
}
2.justify-content:主轴上的对齐方式
.container{
display: flex;
border: 3px solid black;
justify-content: flex-start;
}
flex-start：项目向主轴起点对齐（默认值）效果图和刚设置为弹性一样。
flex-end：项目向主轴终点对齐：
center：项目居中，这也是我们平时使用中最常见的：
space-between：项目之间等间距分布：
space-around：项目周围等间距分布：
space-evenly：项目之间及项目与边缘等间距分布：
3.align-items:交叉轴上的对齐方式
.container{
height: 100px;
display: flex;
border: 3px solid black;
align-item: stretch;
}
stretch：项目沿交叉轴拉伸以填满容器，但前提是box并未定义初始高度，这边我们将高度先注释掉：
flex-start：项目向交叉轴的起点对齐:
flex-end：项目向交叉轴的终点对齐：
center：项目在交叉轴上居中对齐：
baseline：项目在基线上对齐，从而达到更好的视觉效果：
4.align-content：用于控制多行项目在交叉轴上的对齐方式
align-content与align-items属性的取值相同,区别就在于是控制多行的属性，但要注意的是flex-wrap属性默认为nowwrap，也就是不会换行，并且flex-shrink属性默认为1，此时项目会自动缩小以适应你浏览器窗口的缩放，所以将这两个值调整后我们才能看到效果（这两个属性我们在下文会讲到）：
.container{
display:flex;
border: 3px solid black;
height: 200px;
margin-top: 100px;
align-content: end; /*项目向交叉轴终点对齐*/
flex-wrap: wrap; /*默认为nowrap*/
}
.box{
border: 1px solid black;
width: 150px;
height: 50px;
margin: 8px;
flex-shrink: 0; /*默认值为1*/
}
5.flex-direction：用于定义主轴的方向，弹性项目的排列方式
.container{
display:flex;
border: 3px solid black;
height: 100px;
flex-direction: row;
}
row：默认值，从左到右排列。
row-reverse：从右到左排列：
colum：从上到下排列：
column-reverse：从下到上排列：
6.flex-wrap：用于定义弹性项目是否换行以及如何换行
display:flex;
border: 3px solid black;
height: 100px;
flex-wrap: nowrap;
}
nowrap：默认值，所有项目都在同一行显示，不会换行。
wrap：项目会在必要时换行，第一行在上方：
wrap-reverse：项目会在必要时换行，但第一行在下方：
Flex的项目属性
1.order属性用于控制弹性项目在弹性容器中的排列顺序
.box1{
order: 1;
}
.box2{
order: 3;
}
.box3{
order: 2;
}
.box4{
order: 4;
}
从图中可以看到，项目是按1324排列的，排列的顺序与我设置
order的大小有关order越小的项目，将会排在越前面，数值的取值可以为负数。
2.flex-grow:当容器有剩余空间时，项目根据其值来分配剩余空间
.box{
border: 1px solid black;
width: 100px;
height: 50px;
margin: 8px;
flex-grow: 1;
}
当将他设置为1时，所有项目会平均分配剩余空间：
当我将box1中的值设置为2，box2中的值设置为1，其余两个box为0时：
.box1{
flex-grow: 2;
}
.box2{
flew-grow: 1;
}
3.flex-shrink:它决定了项目在空间不足时的缩小比例
默认值为1，即所有项目将会等比例缩小；其设置为0后，项目将不会缩小；如果将一个项目设置为0.5，另一项目设置为1时，并将剩余两项设置为0时：
.box{
border: 1px solid black;
width: 150px;
height: 50px;
margin: 8px;
flex-shrink: 0;
}
.box1{
flex-shrink: 0.5;
}
.box2{
flex-shrink: 1;
}
4.flex-basis：定义项目在主轴方向上的初始大小
flex-basis的默认值是auto,项目的初始大小会根据内容自动确定，可以设置为具体长度如50px，100px表示项目在主轴方向上的初始大小为50 100像素；也可设置为30%，50%的百分比形式，表示项目的初始大小为弹性容器主轴长度的50%。
5.align-self ：用于控制单个项目在交叉轴上的对齐方式
align-self 属性的取值与 align-items 属性相同，其能覆盖掉align-items的取值，这边我们就举一个例子：
.container{
display:flex;
border: 3px solid black;
height: 100px;
align-items: baseline;
}
.box:nth-child(2) {
height: 70px;
align-self: self-end; /*覆盖掉了baseline*/
}
小结
弹性布局作为css中必须掌握的一环，以上便是我对其的全部理解，有错误和不足的欢迎大家在评论区指正，相互交流，共同进步。
