前言
Flex布局是CSS3中新增加的一种弹性布局模型，它可以用来实现常见的页面布局，例如：垂直居中、水平居中、等高列布局、底部固定、左右布局、上下布局、宽度自适应、响应式布局等。使用Flex布局可以取代float、position和display等传统布局方式，让我们更轻松、快捷地完成页面搭建。本文将全面详细讲解Flex布局，包括其基础知识、使用方法、布局属性和使用场景等。
一、基础知识
- Flexbox定义
Flexbox（弹性盒子）布局是一个新的CSS3中的布局模型，是一个一维布局模型，可以用来排列复杂的页面元素，以便在不同的屏幕大小和设备上实现自适应的布局，例如垂直居中和水平居中等。
- Flex容器和Flex项目
在Flex布局模型中，存在两个基本概念：Flex容器和Flex项目。
Flex容器：指采用Flex布局模型的父元素，通过display:flex或display:inline-flex属性来声明。
Flex项目：指被包含在Flex容器中的每一个子元素，成为Flex项。
- 主轴和交叉轴
在Flex容器中，存在主轴和交叉轴两个概念。
主轴：Flex容器的主要方向，通常是水平方向（row）或垂直方向(column)。
交叉轴：与主轴交叉的方向，通常是垂直方向（column）或水平方向（row）。
- 排列方向
Flex容器中的元素排列方向有两种：从左到右（row）和从上到下（column）。
二、使用方法
- 定义Flex容器
首先，我们需要将Flex容器的display属性设置为flex或inline-flex，来声明它采用了Flex布局模型。这里需要注意，一定要在Flex容器上定义display属性，而不是在子元素上定义。
.container {display: flex; /*或者 inline-flex*/
}
- 设置子元素Flex项目
设置Flex项目通常采用flex属性，这个属性可以细分为三个子属性：flex-grow、flex-shrink和flex-basis。
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目都设置为1，则等分剩余空间。如果某一个项目的flex-grow属性为2，其余项目都为1，则前者的容器占据的剩余空间将比其他项目多一倍。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目设置为0，则空间不足也不缩小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）默认值为auto，即项目的本来大小。
.item {flex: 1; /*设置为1则等分剩余空间*/
}
- 设置Flex容器的排列方向和换行方式
设置Flex容器的排列方向和换行方式，可以使用flex-direction属性和flex-wrap属性。
flex-direction属性可选属性值：
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap属性可选属性值：
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
.container {flex-direction: row; /*设置为水平方向*/flex-wrap: wrap; /*超出部分自动换行*/
}
- 设置Flex项的对齐方式
我们可以使用align-items属性和justify-content属性来分别设置Flex项在交叉轴和主轴上的对齐方式。
align-items属性可选属性值：
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。
stretch（默认）：如果项目未设置高度或设为auto，将占满整个容器的高度。
justify-content属性可选属性值：
flex-start（默认值）：左对齐。
flex-end：右对齐。
center：居中。
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly：分布在父容器内部，间隔相等。
.container {align-items: center; /*交叉轴居中*/justify-content: space-between; /*主轴两端对齐*/
}
三、布局属性
-
Flex容器的属性
Flex容器有一些常用的属性，可以帮助我们控制Flex布局模型下的布局效果。
flex-direction：设置主轴方向。
flex-wrap：设置子元素是否换行。
justify-content：设置在主轴上如何排列Flex项。
align-items：设置在交叉轴上如何排列Flex项。
align-content：设置在交叉轴上如何排列多行Flex项。
-
Flex项目的属性
Flex项有一些常用的属性，可以帮助我们更加灵活地控制元素的布局效果。
order：定义元素的排列顺序。
flex-grow：定义元素的放大比例。
flex-shrink：定义元素的缩小比例。
flex-basis：定义元素的基准大小。
flex：设置元素的放大、缩小、基准大小三个属性。
align-self：设置元素在交叉轴的对齐方式，会覆盖Flex容器的align-items属性。
四、使用场景
- 等高列布局
通常情况下，我们希望多列内容高度相等，实现一种等高列布局效果。传统的实现方式为通过JavaScript计算每一列高度后再进行调整，而使用Flex布局可以非常方便地实现这种效果。我们只需要将父容器设置为Flex容器，并设置所有子元素的flex-grow属性为1即可。
.container {display: flex;
}.item {flex: 1;
}
- 固定底部
有时候我们需要将底部的一些内容固定在页面底部，例如页脚、返回按钮等。
使用Flex布局可以非常方便地实现固定底部的效果，只需要将父容器设置为Flex容器，并且设置Flex容器的高度为100%，子元素设置为绝对定位（position:absolute），然后设置bottom为0即可。
.container {display: flex;min-height: 100vh; /* 保证占满全屏 */flex-direction: column; /* 竖直方向 */
}.content {flex: 1; /* 占满剩余空间 */position: relative; /* 相对定位 */
}.footer {position: absolute; /* 绝对定位 */bottom: 0; /* 底部对齐 */
}
- 水平居中和垂直居中
使用Flex布局可以非常方便地实现水平居中和垂直居中的效果。
水平居中：将Flex容器的justify-content属性设置为center即可。
.container {display: flex;justify-content: center; /* 水平居中 */
}
垂直居中：将Flex容器的align-items属性设置为center即可。
.container {display: flex;align-items: center; /* 垂直居中 */
}
如果需要同时实现水平居中和垂直居中，则将Flex容器的justify-content属性和align-items属性都设置为center即可。
.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}
- 左右布局
左右布局是一种常见的页面布局方式，通常用于实现页面的两栏式布局或者导航栏加内容区域的布局。使用Flex布局可以轻松实现左右布局效果，只需将父容器设置为Flex容器，然后设置内容区域的flex属性为1，即可让其占据剩余空间，左侧区域设置固定宽度即可。
HTML代码示例：
<div class="container"><div class="sidebar">这是左侧区域</div><div class="content">这是内容区域</div>
</div>
CSS代码示例：
.container {display: flex;
}.sidebar {width: 200px; /* 左侧区域固定宽度 */
}.content {flex: 1; /* 占满剩余空间 */
}
- 上下布局
上下布局也是一种常见的页面布局方式，通常用于实现页面的顶部导航栏和内容区域的布局。使用Flex布局可以轻松实现上下布局效果，只需将父容器设置为Flex容器，然后设置内容区域的flex属性为1，即可让其占据剩余空间，顶部导航栏设置固定高度即可。
HTML代码示例：
<div class="container"><div class="header">这是顶部导航栏</div><div class="content">这是内容区域</div>
</div>
CSS代码示例：
.container {display: flex;flex-direction: column; /* 垂直方向 */
}.header {height: 60px; /* 顶部导航栏固定高度 */
}.content {flex: 1; /* 占满剩余空间 */
}
- 宽度自适应
使用Flex布局可以实现宽度自适应，使元素宽度根据父元素的宽度自动调整。只需要将父容器设置为Flex容器，并设置子元素的flex属性为1或者0即可。
HTML代码示例：
<div class="container"><div class="item">这是一个自适应宽度的元素</div><div class="item-fixed">这是一个固定宽度的元素</div>
</div>
CSS代码示例：
.container {display: flex;
}.item {flex: 1; /* 自适应宽度 */
}.item-fixed {width: 200px; /* 固定宽度 */
}
- 响应式布局
响应式布局是指页面根据不同设备的屏幕大小和分辨率，自动适应不同的布局。使用Flex布局可以轻松实现响应式布局，只需要设置不同的Flex属性值，通过媒体查询调整属性值，即可实现不同屏幕大小下的布局效果。
HTML代码示例：
<div class="container"><div class="item">这是一个元素</div><div class="item">这是另一个元素</div><div class="item">这是第三个元素</div>
</div>
CSS代码示例：
.container {display: flex;flex-wrap: wrap; /* 换行 */
}.item {flex: 1; /* 等分剩余空间 */
}@media (max-width: 768px) {.item {flex-basis: 50%; /* 屏幕小于768px时，每行只显示两个元素 */}
}@media (max-width: 480px) {.item {flex-basis: 100%; /* 屏幕小于480px时，每行只显示一个元素 */}
}
