# CSS Flexbox布局入门：从零开始掌握弹性盒子模型 你有没有过这样的经历？ 想让导航栏里的链接均匀分布在容器两侧，试了`float: left`和`text-align: right`组合，结果链接挤成一团； 想做一张卡片列表，希望卡片自动换行且间距一致，用`inline-block`加`margin`调了半天，要么间距不对，要么换行后错位； 或者想让一个容器里的元素垂直居中，写了`vertical-align: middle`却没效果…… 如果遇到过这些问题，那今天的Flexbox（弹性盒子）布局一定能帮你解决。它是CSS中专门用于**一维元素排列**的布局模型，能让元素在容器内灵活调整位置、大小和对齐方式，代码简洁且易维护。哪怕你是零基础，跟着本文走，也能快速上手。 ## 一、先搞懂两个核心概念：容器与项目 要使用Flexbox，首先得明确两个角色： - **Flex容器**：应用`display: flex`的父元素（比如一个`div`或`nav`）。它像一个“弹性盒子”，决定了里面元素的排列规则。 - **Flex项目**：容器的**直接子元素**（比如`div`里的`a`标签或`p`标签）。一旦父元素变成Flex容器，子元素自动成为“项目”，遵循Flexbox的排列逻辑。 举个例子： ```html ``` 给`nav`加`display: flex`，它就成了Flex容器，里面的四个链接自动变成Flex项目，接下来所有Flexbox属性都围绕这个容器和项目展开。 ## 二、理解主轴与交叉轴：元素排列的“方向坐标系” Flexbox的核心逻辑基于两个**轴**： - **主轴（Main Axis）**：元素默认排列的方向。默认是**水平方向**（从左到右），类似“行”。 - **交叉轴（Cross Axis）**：与主轴垂直的方向。默认是**垂直方向**（从上到下），类似“列”。 可以把容器想象成一个坐标系： - 主轴是x轴，项目沿着x轴排列； - 交叉轴是y轴，项目的对齐（比如垂直居中）基于y轴调整。 注意：当你改变主轴方向（后面会讲`flex-direction`），交叉轴也会随之改变（比如主轴变成垂直，交叉轴就变成水平）。 ## 三、Flex容器的常用属性：控制项目的排列规则 Flex容器的属性决定了项目在容器内的整体布局，最常用的有以下几个： ### 1. `flex-direction`：改变主轴方向 作用：指定主轴的方向，从而改变项目的排列方向。 可选值： - `row`（默认）：主轴水平向左到右（项目从左到右排列）； - `row-reverse`：主轴水平向右到左（项目从右到左排列）； - `column`：主轴垂直向上到下（项目从上到下排列）； - `column-reverse`：主轴垂直向下到上（项目从下到上排列）。 例子：想让导航栏的链接从右到左排列，只需给容器加`flex-direction: row-reverse`： ```css .navbar { display: flex; flex-direction: row-reverse; /* 链接从右到左排 */ } ``` ### 2. `justify-content`：控制项目在主轴上的对齐 作用：调整项目在**主轴**上的间距和对齐方式，解决“元素怎么排”的问题。 可选值（结合例子更好记）： - `flex-start`（默认）：项目靠主轴起点排列（比如水平左对齐）； - `flex-end`：项目靠主轴终点排列（比如水平右对齐）； - `center`：项目在主轴上居中对齐； - `space-between`：两端对齐，项目之间的间距相等（比如导航栏链接左右贴边，中间间距一样）； - `space-around`：每个项目**两边**的间距相等（比如卡片列表，每个卡片左右都有间隙）； - `space-evenly`：所有间距（包括两端）都相等（比如项目均匀分布在容器内）。 例子：卡片列表想让卡片居中且有间隙，用`justify-content: space-around`： ```css .card-container { display: flex; justify-content: space-around; /* 卡片居中，两边有间隙 */ } ``` ### 3. `align-items`：控制项目在交叉轴上的对齐 作用：调整项目在**交叉轴**上的对齐方式，解决“元素怎么站”的问题（比如垂直居中）。 可选值： - `stretch`（默认）：项目拉伸填充交叉轴（比如项目高度不一致时，会被拉成和容器一样高）； - `flex-start`：项目靠交叉轴起点排列（比如垂直顶部对齐）； - `flex-end`：项目靠交叉轴终点排列（比如垂直底部对齐）； - `center`：项目在交叉轴上居中对齐（比如导航栏链接垂直居中）。 例子：导航栏里的链接高度不一样，想让它们垂直居中，用`align-items: center`： ```css .navbar { display: flex; align-items: center; /* 链接垂直居中 */ } ``` ### 4. `flex-wrap`：控制项目是否换行 作用：当容器空间不足时，项目是否自动换行。 可选值： - `nowrap`（默认）：不换行，项目会被压缩（比如容器变窄，卡片会挤在一起）； - `wrap`：换行，项目从上到下排列（比如卡片列表太长，自动换到下一行）； - `wrap-reverse`：反向换行，项目从下到上排列。 例子：卡片列表想自动换行，用`flex-wrap: wrap`： ```css .card-container { display: flex; flex-wrap: wrap; /* 卡片换行 */ } ``` ### 5. `align-content`：控制多行项目在交叉轴上的对齐 作用：当项目换行后（`flex-wrap: wrap`），调整多行项目在**交叉轴**上的整体对齐方式。 可选值（结合例子）： - `stretch`（默认）：多行项目拉伸填充交叉轴； - `flex-start`：多行项目靠交叉轴起点排列（比如垂直顶部对齐）； - `center`：多行项目在交叉轴上居中对齐； - `space-between`：多行项目两端对齐，行之间间距相等。 例子：卡片换行后，想让多行卡片垂直居中，用`align-content: center`： ```css .card-container { display: flex; flex-wrap: wrap; align-content: center; /* 多行卡片垂直居中 */ } ``` ## 四、Flex项目的常用属性：调整单个元素的排列 除了容器属性，Flex项目也有自己的属性，可以覆盖容器的规则，调整单个元素的位置或大小： ### 1. `order`：改变项目的排列顺序 作用：指定项目的排列顺序，数值越小越靠前（默认是0）。 例子：想让“联系我们”链接放在导航栏最前面，不用改HTML结构，直接加`order: -1`： ```html 联系我们 ``` ### 2. `flex-grow`：控制项目的放大比例 作用：当容器有剩余空间时，项目是否放大。默认是0（不放大）。 例子：三个卡片，想让第三个卡片占比更大，设置`flex-grow: 2`（另外两个是1）： ```css .card:nth-child(3) { flex-grow: 2; /* 第三个卡片放大两倍 */ } ``` ### 3. `flex-shrink`：控制项目的缩小比例 作用：当容器空间不足时，项目是否缩小。默认是1（会缩小）。 例子：想让某个卡片不缩小，设置`flex-shrink: 0`： ```css .card { flex-shrink: 0; /* 卡片不缩小，保持原宽度 */ } ``` ### 4. `align-self`：覆盖容器的`align-items` 作用：调整单个项目在**交叉轴**上的对齐方式，覆盖容器的`align-items`规则。 例子：某个卡片想单独底部对齐，用`align-self: flex-end`： ```css .card:nth-child(2) { align-self: flex-end; /* 第二个卡片底部对齐 */ } ``` ## 五、实战：用Flexbox做一个导航栏+卡片列表 说了这么多，不如动手做个例子巩固一下。 ### 1. 导航栏：链接两端对齐+垂直居中 HTML： ```html ``` CSS： ```css .navbar { display: flex; /* 开启Flexbox */ justify-content: space-between; /* 链接两端对齐 */ align-items: center; /* 链接垂直居中 */ padding: 1rem; background-color: #f0f0f0; } .navbar a { padding: 0.5rem 1rem; text-decoration: none; color: #333; border-radius: 0.25rem; } .navbar a:hover { background-color: #e0e0e0; } ``` ### 2. 卡片列表：自动换行+均匀分布 HTML： ```html ``` CSS： ```css .card-container { display: flex; /* 开启Flexbox */ flex-wrap: wrap; /* 卡片换行 */ justify-content: space-around; /* 卡片均匀分布 */ gap: 1rem; /* 卡片之间的间隙（现代浏览器支持） */ padding: 1rem; } .card { flex: 1 1 200px; /* 简写：flex-grow=1, flex-shrink=1, flex-basis=200px */ padding: 1rem; background-color: #fff; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; } ``` 解释： - `flex: 1 1 200px`是Flex项目的简写属性，等于`flex-grow: 1`（放大比例1）、`flex-shrink: 1`（缩小比例1）、`flex-basis: 200px`（初始宽度200px）。意思是：项目初始宽度200px，当容器有剩余空间时放大，空间不足时缩小。 - `gap: 1rem`是现代浏览器支持的属性，用来设置项目之间的间隙，比`margin`更方便。 ## 六、注意事项 1. **Flexbox适合一维布局**：比如行或列的排列，二维布局（比如网格）建议用CSS Grid。 2. **容器与项目属性不要混淆**：`justify-content`是容器属性（控制项目在主轴的对齐），`order`是项目属性（调整单个项目的顺序）。 3. **兼容性**：主流浏览器（Chrome、Firefox、Edge、Safari）都支持Flexbox，但旧版本（比如IE9及以下）不支持，不过现在基本不用考虑IE了。 ## 总结 Flexbox布局的核心是**容器控制整体规则，项目调整单个元素**。记住几个关键属性： - 容器：`display: flex`（开启）、`flex-direction`（主轴方向）、`justify-content`（主轴对齐）、`align-items`（交叉轴对齐）、`flex-wrap`（换行）； - 项目：`order`（顺序）、`flex-grow`（放大）、`flex-shrink`（缩小）、`align-self`（单个对齐）。 其实Flexbox一点都不难，多练几个例子，比如导航栏、卡片列表、表单布局，你会发现它比传统布局省了很多麻烦。下次遇到元素排列的问题，不妨试试Flexbox——它会成为你CSS工具箱里的“瑞士军刀”。 赶紧打开编辑器，动手试试吧！如果有问题，欢迎在评论区留言~