当前位置：首页 > news >正文

CSS Flexbox：拥有魔法的排版盒子

news 2026/6/28 2:35:38

生活中的例子 01
- 网页导航栏（所有菜单项自动横向排列）
生活中的例子 02
- 商品卡片列表（自动适应不同屏幕宽度）
生活中的例子 03
- 让一个按钮完美地死死地居中在屏幕正中央

新手入门指南

别再用空格键排版了！

嗨！不管是写 Word 还是做网页，我相信你一定遇到过这种崩溃时刻：你想把图片和文字并排放在一起，或者你想让一个按钮死死地处于屏幕正中间。于是你疯狂按空格键，或者用各种复杂的数学计算来调整位置，结果换个屏幕大小，排版全乱了。

别怕，CSS 里的Flexbox（弹性盒子）就是来拯救你的超级英雄。

1. 它是啥？（通俗版）

想象你是一个幼儿园老师（这就是你的Flex 容器），你面前有一排小朋友（这些是Flex 项目）。

以前，你得一个个手动把小朋友拽到指定位置。有了 Flexbox，你只需要喊一声口令：“所有人，横着排好！”或者“所有人，两端散开！”小朋友们就会自动、整齐地按照你的规则站好，哪怕有人胖一点、有人瘦一点，队伍都不会乱。

2. 怎么用？两步走

Flexbox 的魔法只需要两个步骤：

第一步：定义“谁是老师”你要给外面的那个大盒子（父元素）施加魔法。告诉它：“变成 Flex 容器吧！”

第二步：下达“口令”一旦大盒子变成了 Flex 容器，你就可以发号施令了。最常用的口令有两个：

justify-content：控制横向怎么排（比如：靠左、居中、分散）。
align-items：控制纵向怎么排（比如：靠上、居中、拉伸）。

3. 代码实战：完美居中

这是前端面试里最经典的问题：“如何让一个方块在屏幕里垂直水平都居中？”用 Flexbox，三行代码搞定：

.container { /* 1. 变身老师（开启 Flex 模式） */ display: flex; /* 2. 横向口令：所有人去中间！ */ justify-content: center; /* 3. 纵向口令：所有人去中间！ */ align-items: center; /* 给个高度方便看效果 */ height: 300px; background-color: #f0f0f0; } .box { width: 50px; height: 50px; background-color: tomato; }

你看，根本不需要算坐标，只要告诉浏览器“居中、居中”，它自己就会算好一切。