CSS Flexbox弹性布局完全指南，轻松实现智能布局利器

Flexbox是CSS设计中，专为一维布局设计的强大工具。它能轻松解决垂直居中、等高列、空间分配等传统布局难题。

本文将带你从零开始，全面掌握Flexbox。

一、Flexbox是什么？

Flexbox（弹性盒子布局）是一种一维的布局模型，它提供了高效的方式来对容器内的项目进行排列、对齐和空间分配，即使它们的大小是未知或动态的。

二、基本概念：容器与项目

采用Flex布局的元素称为Flex容器​（flex container），其直接子元素则自动成为Flex项目​（flex item）。

.container {
    display: flex; /* 或 inline-flex */
}

设置display: flex;后，.container变为弹性容器，其子元素（项目）则成为弹性项目。

三、容器属性（作用于父容器）

1. ​flex-direction​：决定主轴的方向（即项目的排列方向）。
   • row（默认）：水平，从左到右。
   • row-reverse：水平，从右到左。
   • column：垂直，从上到下。
   • column-reverse：垂直，从下到上。
2. ​justify-content​：定义项目在主轴上的对齐方式。
   • flex-start（默认）：左对齐。
   • flex-end：右对齐。
   • center：居中。
   • space-between：两端对齐，项目间间隔相等。
   • space-around：每个项目两侧间隔相等。
3. ​align-items​：定义项目在交叉轴上的对齐方式。
   • stretch（默认）：拉伸填满容器高度。
   • flex-start：交叉轴的起点对齐。
   • flex-end：交叉轴的终点对齐。
   • center：交叉轴的中点对齐（轻松实现垂直居中！​）。
4. ​flex-wrap​：定义项目是否换行。
   • nowrap（默认）：不换行。
   • wrap：换行。

四、项目属性（作用于子项目）

1. ​flex-grow​：定义项目的放大比例，默认为0（不放大）。如果所有项目的flex-grow都为1，则等分剩余空间。
2. ​flex-shrink​：定义项目的缩小比例，默认为1（空间不足时等比缩小）。
3. ​order​：定义项目的排列顺序。数值越小，排列越靠前，默认为0。

五、经典示例：水平垂直居中

Flexbox让经典的居中问题变得异常简单。

.center-me {
    display: flex;
    justify-content: center; /* 主轴居中 */
    align-items: center;     /* 交叉轴居中 */
    height: 300px;
}

六、总结

Flexbox是现代CSS布局的基石，它极大地简化了复杂布局的实现。要学好CSS网页样式设计，请务必熟练掌握容器和项目的核心属性。