Flex布局全称是Flexible Box Layout，它是CSS中专门用来做一维排版的模块。所谓一维，是指它要么沿水平方向排，要么沿垂直方向排，不像Grid那样同时管行和列。在HTML里，只要把一个元素设成弹性容器，它里面的直接子元素就会变成弹性项目，排列行为就由Flex的一套规则接管。
要开启Flex布局，核心是在容器上写display: flex或者display: inline-flex。这两者区别和display: block与display: inline-block类似：前者让容器本身占满一行，后者让容器像行内元素那样只占内容宽度。下面的代码演示了一个最基础的导航条容器：
<!DOCTYPE html>
<html>
<head>
<style>
.nav {
display: flex;
background: #f0f0f0;
padding: 10px;
}
.nav a {
margin-right: 15px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="nav">
<a href="https://ipipp.com">首页</a>
<a href="https://ipipp.com">文章</a>
<a href="https://ipipp.com">关于</a>
</div>
</body>
</html>
上面的.nav变成弹性容器后，三个a标签默认会从左往右排成一行，不再需要浮动。这就是Flex最直观的好处：排版逻辑更清晰，也不用写清除浮动的hack。
Flex布局的底层原理
Flex布局内部有两个关键轴线：主轴（main axis）和交叉轴（cross axis）。主轴方向由flex-direction决定，默认是row，也就是水平方向；如果设成column，主轴就变成垂直方向。交叉轴永远和主轴垂直。所有对齐属性都是围绕这两条轴设计的。
当容器被设为flex后，浏览器会先计算容器的可用空间，再根据每个项目的flex-grow、flex-shrink和flex-basis来分配空间。flex-basis相当于项目在分配多余空间之前的初始大小；flex-grow决定项目怎么瓜分剩余空间；flex-shrink决定空间不够时怎么压缩。理解这三者的关系，是掌握Flex的根本。
主轴与交叉轴的控制
控制主轴对齐用justify-content，比如flex-start靠左、center居中、space-between两端贴边中间均分。控制交叉轴对齐用align-items，常用值有stretch撑满高度、center垂直居中。下面代码展示了一个居中卡片：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px solid #ccc;
}
.box {
width: 100px;
height: 100px;
background: lightblue;
}
这段CSS让.box在.container里水平和垂直都居中。如果用传统办法，可能要算margin或者用绝对定位加transform，而Flex两行属性就解决了。不过要注意，align-items默认是stretch，如果子项有固定高度就不会被拉伸，这点常让新手困惑。
Flex项目的伸缩机制
flex属性其实是flex-grow、flex-shrink、flex-basis的简写。最常用的是flex: 1，等价于flex: 1 1 0%，意思是项目以0为基准、有剩余就等比例放大、不够就等比例缩小。下面的例子让三个栏目等宽：
<style>
.row { display: flex; }
.col { flex: 1; background: #ddd; margin: 2px; }
</style>
<div class="row">
<div class="col">栏目一</div>
<div class="col">栏目二</div>
<div class="col">栏目三</div>
</div>
这里每个.col都设了flex: 1，所以它们平分宽度。如果给其中一个加flex: 2，它会拿到其他项目两倍的空间。这种按比例分配比手动算百分比更不容易出错，也方便后期调整。
但flex-shrink默认是1，当内容过多时项目会被压缩，可能导致文字挤在一起。这时可以设flex-shrink: 0禁止缩小，再配合容器滚动或换行。换行用flex-wrap: wrap，让项目在空间不足时掉到下一行，而不是硬挤。
常见误区与避坑
一个典型误区是以为float和vertical-align对Flex项目还有效。实际上，成为弹性项目后，浮动、清除浮动、vertical-align都会失效。还有人把width: 100%和flex: 1混用，结果在某些浏览器里出现溢出，因为flex-basis和width会互相影响，建议统一用flex-basis控制基准尺寸。
另一个坑是嵌套Flex容器时，父容器如果没有明确高度，子容器的align-items: stretch可能不会生效。此时需要给父级设具体高度或min-height，或者改用align-content管理多行对齐。理清容器与项目的层级，才能避免布局“看起来不对劲”。
实战使用建议
在真实项目里，Flex最适合做顶部导航、侧边栏加内容区、移动端单列流式布局。比如后台系统的整体框架，可以用一个纵向Flex容器装头部、中间主体和底部，中间主体再套一个横向Flex放菜单和页面内容。这样不管窗口怎么变，结构都稳。
写Flex时推荐先定容器方向，再决定对齐，最后处理项目伸缩。借助浏览器开发者工具里的Flex可视化面板，能直接看到主轴、交叉轴和项目占比，调试效率很高。熟练之后，你会发现很多以前用float和position拼半天的布局，现在几行flex属性就搞定了。
HTMLFlexboxflex_layout修改时间：2026-08-07 20:00:31