引言:布局难题?打工人的 "工位整理" 哲学
打工人每天整理工位,让文件、绿植、水杯各就其位,效率翻倍。前端开发里,页面布局就像 "整理代码工位",元素乱糟糟可不行!Flex 弹性布局 就是咱们的 "布局整理术",轻松让按钮、卡片、导航在不同屏幕 "乖乖听话"。更关键的是,前端面试超爱考 Flex!

基础篇:像整理工位一样搭好布局框架
(一)开启 "弹性工位" 模式(1 行代码激活)
想让元素排列变灵活,只需给父容器加一行 CSS,就像给工位划定 "弹性整理区":
css
.container {
display: flex; /* 激活弹性布局,子元素秒变"可整理的工位物品" */
}
激活后,子元素(简称 "项目")默认 水平排列 ,还能通过属性控制对齐、分布,比传统 float
省心 100 倍!
(二)核心操作:"工位物品" 怎么摆?
1. 排列方向:flex-direction
(决定物品咋排序)
- 默认水平排 :
flex-direction: row
(像工位从左到右摆键盘、显示器、水杯) - 垂直堆起来 :
flex-direction: column
(像把物品从上到下叠放,适合手机端列表) - 反向排列 :
row-reverse
(从右往左排)、column-reverse
(从下往上排,面试偶尔考!)
示例:做垂直导航栏(手机端常用):
css
.nav {
display: flex;
flex-direction: column; /* 链接从上到下排 */
}
像这样
2. 水平对齐:justify-content
(像对齐工位物品)
- 靠左 / 上对齐 :
flex-start
(默认,比如工位左侧对齐键盘) - 居中对齐 :
center
(让按钮组在页面水平居中,面试高频!) - 均匀分布 :
space-between
(两端贴边,中间间距相等,导航栏常用) - 分散对齐 :
space-around
(每个物品两侧间距相等,视觉更匀)
示例:让按钮组水平居中:
css
.btn-group {
display: flex;
justify-content: center;
}

3. 垂直对齐:align-items
(像调整工位物品高度)
-
拉伸占满 :
stretch
(默认,物品自动填充满容器高度,比如卡片自适应) -
垂直居中 :
center
(让文字和图标在按钮里垂直居中,超实用!) -
靠上 / 下对齐 :
flex-start
/flex-end
(特殊布局用,比如顶部标题栏)
示例:按钮内文字垂直居中:
css
.button {
display: flex;
align-items: center; /* 文字、图标垂直居中 */
height: 40px;
}
(三)实操:5 分钟搭好 "导航栏工位"
需求:导航链接水平均匀分布,鼠标悬停高亮。代码如下(像整理工位一样简单):
html
<nav class="nav-bar">
<a href="#" class="item">首页</a>
<a href="#" class="item">产品</a>
<a href="#" class="item">关于</a>
</nav>
<style>
.nav-bar {
display: flex;
justify-content: space-between; /* 链接均匀分布 */
align-items: center; /* 垂直居中 */
padding: 0 20px;
height: 60px;
background: #f8f8f8;
}
.item {
padding: 0 10px;
color: #333;
text-decoration: none;
transition: 0.3s;
}
.item:hover {
color: #007bff; /* 悬停高亮 */
}
</style>
效果:适配手机、平板、PC,布局永远整齐,像精心整理的工位!
解决 "复杂工位" 难题(面试必考场景)
换行布局:flex-wrap
(物品太多,换行整理)
默认情况下,Flex 项目会挤在一起(像工位物品堆成山)。开启 flex-wrap: wrap
,超出容器自动换行:
css
.container {
flex-wrap: wrap; /* 物品太多就换行,适配不同屏幕 */
}
多行对齐:align-content
(像整理多排工位物品)
当项目换行后,用 align-content
控制 多行垂直分布 ,用法和 justify-content
类似:
space-between
:多行两端对齐,中间间距相等(适合卡片列表)center
:多行整体居中(特殊布局用)
示例:卡片列表多行均匀分布:
css
.card-container {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* 多行均匀分布 */
}
项目专属设置:flex
+ align-self
(个性化整理)
1. flex
:让项目 "伸缩自如"(面试核心!)
flex
是 flex-grow
(放大)、flex-shrink
(缩小)、flex-basis
(基础尺寸)的简写。最常用 flex: 1
,让项目 平分剩余空间(像工位里的可伸缩隔板)。
示例:经典 "左侧固定 + 中间自适应 + 右侧固定" 布局:
html
<div class="layout">
<aside class="left">左侧菜单</aside>
<main class="center">中间内容</main>
<aside class="right">右侧广告</aside>
</div>
<style>
.layout {
display: flex;
}
.left, .right {
width: 200px; /* 固定宽度 */
}
.center {
flex: 1; /* 中间占满剩余空间,自适应不同屏幕 */
}
</style>
2. align-self
:单独调整某个项目(像工位里的 "特殊物品")
覆盖容器的 align-items
,单独控制某个项目的垂直对齐。比如让某个按钮 "置顶":
css
.special-btn {
align-self: flex-start; /* 其他按钮居中,它靠上对齐 */
}
面试真题实战:用 Flex 破解 "布局难题"(附答案 + 思路)
真题 1:实现 "水平垂直都居中" 的弹框
需求 :弹框宽高固定,在页面正中间(水平 + 垂直居中)。
思路 :用 justify-content
(水平居中) + align-items
(垂直居中),给父容器( body 或专门的容器)加 Flex。
html
<div class="modal-container">
<div class="modal">我是弹框,居中啦!</div>
</div>
<style>
.modal-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 占满视口高度,否则垂直居中不生效 */
background: rgba(0,0,0,0.3); /* 背景遮罩 */
}
.modal {
width: 300px;
height: 200px;
background: #fff;
padding: 20px;
}
</style>
真题 2:对比 Flex 与传统布局(如 float )的优势
回答思路(像对比 "整理工位" 方式):
- 更简单 :Flex 只需
display: flex
+ 几个属性,就能实现复杂布局;float 需要清除浮动(clearfix
),代码冗余易出错。 - 响应式友好 :Flex 的
flex-wrap
、flex: 1
适配不同屏幕更灵活;float 调整布局得频繁改width
、margin
,容易乱。 - 功能强大:支持项目伸缩、单独对齐,轻松实现自适应、换行布局;float 主要解决简单水平排列,复杂布局难搞。
总结
Flex 弹性布局就像 "代码工位整理术",学会它,开发时布局不再头秃,面试时也能轻松拿捏考点!快用这些技巧优化你的项目,下次面试直接 "杀疯"~