Flexbox即弹性盒子布局，是CSS中专门用于解决元素对齐和空间分配问题的布局模型，它打破了传统块级、行内布局的限制，让容器内的子元素可以按照规则灵活调整尺寸和位置，不需要依赖浮动、定位等复杂手段就能实现各类常见布局效果。
Flexbox的核心概念
要使用Flexbox，首先需要将容器设置为弹性容器，通过给父元素添加display: flex;属性即可开启，开启后容器内的直接子元素会变为弹性项目，自动按照Flexbox规则排列。
Flexbox的布局逻辑围绕两个轴展开：主轴是弹性项目排列的方向，默认是水平从左到右；交叉轴是和主轴垂直的方向，默认是垂直从上到下。所有对齐和空间分配的属性都是基于这两个轴生效的。
对齐相关的核心属性
主轴对齐：justify-content
该属性用于控制弹性项目在主轴上的对齐方式和空间分配，常用取值如下：
- flex-start：项目靠主轴起点对齐，默认取值
- flex-end：项目靠主轴终点对齐
- center：项目在主轴方向居中对齐
- space-between：项目两端对齐，中间间距相等
- space-around：每个项目两侧的间距相等，项目之间间距是两端间距的2倍
- space-evenly：所有间距完全相等
示例代码如下：
/* 父容器样式 */
.flex-container {
display: flex;
/* 主轴水平居中 */
justify-content: center;
width: 100%;
height: 200px;
background-color: #f0f0f0;
}
/* 子项目样式 */
.flex-item {
width: 80px;
height: 80px;
background-color: #4a90e2;
margin: 0 5px;
}交叉轴对齐：align-items
该属性用于控制弹性项目在交叉轴上的对齐方式，常用取值如下：
- stretch：项目拉伸填满交叉轴高度，默认取值，前提是项目未设置交叉轴方向的尺寸
- flex-start：项目靠交叉轴起点对齐
- flex-end：项目靠交叉轴终点对齐
- center：项目在交叉轴方向居中对齐
- baseline：项目按第一行文字的基线对齐
实现水平垂直居中的经典Flexbox写法如下：
.center-container {
display: flex;
/* 主轴居中 */
justify-content: center;
/* 交叉轴居中 */
align-items: center;
width: 100%;
height: 300px;
background-color: #eee;
}
.center-item {
width: 120px;
height: 120px;
background-color: #ff6b6b;
}空间分配相关属性
flex-grow：分配剩余空间
该属性用于设置弹性项目的放大比例，默认值为0，即不放大。如果所有项目的flex-grow值之和为1，那么剩余空间会被等比例分配；如果某个项目的flex-grow为2，它会分到其他项目2倍的空间。
示例：三个项目按比例分配剩余空间
.grow-container {
display: flex;
width: 100%;
height: 150px;
background-color: #f5f5f5;
}
/* 第一个项目占1份剩余空间 */
.grow-item1 {
flex-grow: 1;
background-color: #51cf66;
}
/* 第二个项目占2份剩余空间 */
.grow-item2 {
flex-grow: 2;
background-color: #339af0;
}
/* 第三个项目占1份剩余空间 */
.grow-item3 {
flex-grow: 1;
background-color: #fcc419;
}flex-shrink：收缩溢出空间
该属性用于设置弹性项目的缩小比例，默认值为1，即空间不足时项目会缩小。如果设置为0，项目不会缩小，可能会溢出容器。
flex-basis：项目初始尺寸
该属性用于设置弹性项目在分配空间之前的初始大小，默认值为auto，即项目本身的尺寸。可以设置为固定值，比如200px，或者百分比。
实际开发中通常会用flex简写属性，同时设置flex-grow、flex-shrink、flex-basis，比如flex: 1 1 auto;就等同于三个属性分别设置为1、1、auto。
Flexbox的常见使用场景
- 导航栏布局：实现logo、导航项、用户操作区的对齐和间距分配
- 卡片列表：实现卡片等宽、自适应换行、间距均匀的效果
- 表单布局：对齐表单标签和输入框，调整表单项之间的间距
- 移动端适配：结合flex-wrap属性实现弹性换行，适配不同屏幕尺寸
注意事项
Flexbox的兼容性已经覆盖绝大多数现代浏览器，如果需要兼容非常老旧的浏览器版本，可以添加对应的前缀。另外，Flexbox只影响直接子元素的布局，嵌套的深层子元素不会默认继承弹性布局特性，需要单独设置。
Flexbox不是用来替代所有传统布局的，它更适合一维方向的布局场景，如果是二维的复杂网格布局，可以结合Grid布局一起使用，发挥各自的优势。