CSS Flexbox 布局
Flexbox 是现代 CSS 布局的核心技术之一。它使得容器内的元素能够自动适应不同屏幕尺寸，极大简化了布局代码。
一、启用 Flex 布局
只需将容器的 display 属性设置为 flex 即可。
.container {
display: flex;
}
二、容器属性 (Container)
2.1 flex-direction (排列方向)
决定主轴的方向，默认是 row（水平）。
row：水平排列（默认）column：垂直排列
2.2 justify-content (主轴对齐)
定义项目在主轴上的对齐方式。
.container {
justify-content: center; /* 居中 */
/* 其他值：flex-start, flex-end, space-between, space-around */
}
2.3 align-items (交叉轴对齐)
定义项目在交叉轴上的对齐方式。
.container {
align-items: center; /* 垂直居中 */
}
三、项目属性 (Item)
3.1 flex-grow (放大比例)
定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
3.2 flex-shrink (缩小比例)
定义项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
四、实战案例：居中布局
实现一个元素在页面中完全水平垂直居中，是 Flexbox 最经典的应用。
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
💡 兼容性： Flexbox 在现代浏览器中支持良好，但如果是针对 IE9 及以下版本，需要使用 float 或 inline-block 替代。
五、学习心得
掌握 Flexbox 后，以前需要大量代码才能实现的布局，现在只需几行 CSS 即可完成。建议配合在线可视化工具（如 Flexbox Froggy）进行练习。
免责声明： 本文内容为个人学习笔记，仅供参考学习使用。如有错误或不足，欢迎指正。