Flex布局（flexbox布局）被广泛应用于Web页面的布局中，它是一种强大、高效、灵活的布局方式。Flex布局将盒状元素的排列方式划分为主轴和交叉轴，通过对内部元素的处理方式实现多种不同的布局效果。
父容器
在使用Flex布局时，首先需要将要布局的元素的父容器设置为flex容器，通过设置容器的display属性为flex或者inline-flex即可，如下所示：
.container {
display: flex;
/* 其他属性 */
}
**
这里需要注意，设置了flex容器的元素会自动成为容器的父元素，而且该父容器的子元素会自动成为flex子元素。
主轴与交叉轴
使用Flex布局时，将盒状元素的排列方式划分为主轴和交叉轴，具体的方向由flex容器的flex-direction属性决定，主轴默认为水平方向，交叉轴默认为垂直方向。简单来说，主轴就是元素排列的主要方向，交叉轴是相对于主轴的一条垂直线。
如下所示：
.container {
display: flex;
/* 设置主轴为水平方向 可选值：row | row-reverse | column | column-reverse，默认值为row */
flex-direction: row;
/* 设置交叉轴的对齐方式，可选值：flex-start、flex-end、center、space-between、space-around、stretch */
align-items: center;
/* 其他属性 */
}
**
子元素
在Flex布局中，容器中的每一个子元素都是flex子元素，每个flex子元素的排列方式可以通过设置各自的flex属性来控制。
flex-grow
flex-grow属性用于设置弹性元素的的放大比例。它接受一个无单位的数字作为参数，表示元素在弹性容器中所占据的空间比例，默认值为0，即即使存在剩余空间也不会放大元素。数值越大，占用的空间比例就越大。
flex-shrink
flex-shrink属性用于设置收缩比例，默认值为1，空间不足时，将缩小元素。如果所有元素的flex-shrink属性值都为1，空间不足时它们将等比例缩小。如果在其他元素都满足条件的前提下某个元素的flex-shrink属性值为0，那么该元素不会缩小。如果某个元素的flex-shrink属性值为2，则该元素的剩余空间相比于其他元素的剩余空间将缩小2倍。
flex-basis
flex-basis属性用于设置元素在主轴方向上的初始尺寸，也就是未分配多余空间之前的空间大小。该属性值可以设定为一个长度、百分数或者关键字，如auto。
flex
flex是flex-grow、flex-shrink和flex-basis这三个属性的缩写形式，其中flex-basis属性可以省略，其默认值为auto，并可设置成长度或百分数。
flex: 1; /* 相当于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;*/
flex: 1 0 100px; /* 相当于flex-grow: 1; flex-shrink: 0; flex-basis: 100px;*/
**
align-self
align-self属性用于单独设置某个flex子元素在交叉轴上的对齐方式，如果设置为auto则继承父容器的align-items属性。可选值与align-items相同。
常用属性
justify-content
justify-content属性用于设置弹性元素在主轴上的对齐方式，可选值有：
flex-start：弹性元素位于容器的开头。flex-end：弹性元素位于容器的结尾。center：弹性元素位于容器的中心。space-between：弹性元素以平均分布的方式排列，元素之间的间隔相等。space-around：弹性元素以平均分布的方式排列，元素之间和两端的距离相等。
align-items
align-items用于设置弹性元素在交叉轴上的对齐方式，可选值有：
flex-start：弹性元素位于容器的上侧。flex-end：弹性元素位于容器的下侧。center：弹性元素垂直居中。baseline：弹性元素的基线对齐。stretch：弹性元素被拉伸以适应容器。
align-content
align-content用于为多行弹性容器的行之间添加对齐方式，可选值有：
flex-start：行位于容器的顶部。flex-end：行位于容器的底部。center：行位于容器的中心。space-between：每行以平均分布的方式排列，行之间的间隔相等。space-around：每行以平均分布的方式排列，行之间和两端的距离相等。stretch：行被拉伸以适应容器。
总结
Flex布局是一种强大、高效、灵活的布局方式，它是Web页面布局中的一种趋势。通过对容器和子元素的灵活处理，我们可以轻松地实现多种不同的布局效果。在实际开发中，可以根据具体需求结合各种属性来使用Flex布局，以达到最佳的布局效果。
