flex布局教程零基础入门：超详细图文讲解+实战案例，轻松学会网页弹性布局

大家刚接触网页布局时，是不是总被浮动、定位搞得头大？明明想让元素整齐排列，结果却歪歪扭扭，调整半天也达不到效果。今天兔子哥就给新手朋友们讲讲 flex 布局，这个被称为 “弹性布局” 的工具，能轻松解决 90% 的布局难题。学会它，再也不用为元素对齐、空间分配发愁啦！

一、什么是 flex 布局？新手必须搞懂的基础概念

首先得明白，flex 布局全称是 “弹性盒布局模型”，它能让容器里的元素更灵活地排列。那什么是 “容器” 和 “项目” 呢？简单说，给父元素设置 display: flex 后，这个父元素就成了 flex 容器，而它里面的直接子元素，就自动变成了 flex 项目。
为什么要区分容器和项目？因为 flex 布局的所有属性，都要分清楚是作用在容器上，还是作用在项目上。新手刚开始容易搞混，记住：容器管整体排列方向、对齐方式；项目管自己在容器里的大小、顺序。

二、容器必备属性：3 分钟搞定整体布局

作为容器，有几个核心属性必须掌握，兔子哥把它们整理成表格，对比着学更清楚：

属性名	作用	常用值举例
flex-direction	决定项目排列方向	row（水平左到右）、column（垂直上到下）
justify-content	项目在主轴上的对齐方式	center（居中）、space-between（两端对齐）
align-items	项目在交叉轴上的对齐方式	center（居中）、flex-start（顶端对齐）

我们在使用时，先确定主轴方向。比如设置 flex-direction: row，主轴就是水平方向，这时候 justify-content 控制水平对齐，align-items 控制垂直对齐。想要让项目水平垂直都居中该怎么办？给容器加上 justify-content: center 和 align-items: center，这样项目就乖乖待在中间啦！

---

三、项目常用属性：让每个元素都按你想的来

容器搞定了整体，项目的属性就能微调每个元素的表现。新手常用的有这几个：

1. flex-grow：当容器有剩余空间时，项目是否放大。默认是 0（不放大），如果设为 1，所有项目会按比例分剩余空间。比如两个项目都设为 1，就各占一半；一个设 1 一个设 2，就是 1:2 分配。
2. flex-shrink：当容器空间不够时，项目是否缩小。默认是 1（会缩小），设为 0 的话，这个项目就不会被压缩。
3. order：控制项目的排列顺序。默认都是 0，数值越小越靠前，负数也能用哦。

但有些朋友想要某个项目在垂直方向单独对齐，该怎么办呢？这时候可以用 align-self 属性，它能覆盖容器的 align-items 设置，比如给某个项目加 align-self: flex-end，它就会在交叉轴末端对齐，其他项目不受影响。

---

四、实战案例：用 flex 做一个简单导航栏

光说不练假把式，一起动手做个导航栏吧！步骤很简单：

1. 先写 HTML 结构：一个容器 div（class="nav"），里面放几个 a 标签当导航项。
2. 给容器加样式：.nav {display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 60px;} 这样导航项就会水平两端对齐，垂直居中。
3. 给项目加点样式：a {margin: 0 10px; text-decoration: none;} 让导航项之间有间距，去掉下划线。

这样就可以做出一个简洁的导航栏了，是不是比用浮动方便多了？兔子哥平时做导航栏都喜欢用这个方法，不用清除浮动，还能自适应不同屏幕。

---

五、新手常见问题：这些坑千万别踩

很多朋友刚开始用 flex 会遇到奇怪的问题，比如 “为什么项目没按预期排列？” 大概率是没搞对容器和项目的关系，记住只有直接子元素才是项目哦。还有 “设置了 flex-direction: column 后，对齐方式怎么变了？” 因为主轴变成垂直方向了，这时候 justify-content 控制垂直对齐，align-items 控制水平对齐，别搞反啦！
现在前端开发中，80% 以上的布局都会用到 flex，它比传统布局更灵活，适配移动端也超方便。新手不用急着学所有属性，先把容器的 3 个核心属性和项目的 flex-grow 练熟，大部分布局需求都能满足。平时多动手试试，调整属性值看看效果变化，很快就能掌握啦！希望这篇教程能帮到刚入门的你，一起把布局做得又快又好～

标签： justify-content flex-direction