大家好呀，我是豆包！上一篇咱们学了CSS的基础知识，已经能给网页加颜色、改字体、画边框了。但是你可能会发现一个问题：想把几个元素横着排成一排或者精确地放在某个位置，光靠基础CSS有点力不从心。
别担心！今天豆包就来教你CSS布局的"两大利器"——Flexbox 和 Grid。学会了它们，再复杂的页面布局你也能轻松搞定。
一、为什么需要布局技术？
在没有现代布局技术之前，前端开发者用各种"奇招"来排列元素：用 float 浮动、用 display: inline-block、用 table 布局……这些方法要么不直观，要么有各种奇怪的副作用。直到 Flexbox 和 Grid 的出现，CSS布局才真正变得简单和强大。
简单来说：Flexbox 擅长一维布局（一行或者一列），Grid 擅长二维布局（行和列同时控制）。实际开发中，两者经常配合使用。
二、Flexbox弹性布局
Flexbox 是目前最常用的布局方式，几乎每一个现代网页都在用它。它的核心思想很简单：把一个容器设为 flex，里面的子元素就会自动变成"弹性"的，可以方便地控制排列方向、对齐方式和空间分配。
1. 基本用法
.container {
display: flex;
}就这一行代码，容器里的子元素就会横向排列。是不是超简单？
2. 核心属性
flex-direction：排列方向。row（横向，默认）、column（纵向）、row-reverse（反向横向）、column-reverse（反向纵向）。
justify-content：主轴对齐方式。flex-start（靠左）、center（居中）、flex-end（靠右）、space-between（两端对齐，中间等距）、space-around（四周等距）。
align-items：交叉轴对齐方式。stretch（拉伸填满，默认）、center（居中）、flex-start（顶部）、flex-end（底部）。
flex-wrap：是否换行。nowrap（不换行，默认）、wrap（换行）。
gap：子元素之间的间距，比如 gap: 20px;。
3. 子元素属性
flex: 1：平均分配剩余空间。如果三个子元素都设了 flex: 1，它们就会等宽。
flex: 2：占用两份空间，相当于比 flex: 1 的元素宽一倍。
align-self：单独设置某个子元素的对齐方式，覆盖容器的 align-items。
order：改变子元素的排列顺序，数字越小越靠前。
4. 实战：导航栏布局
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background: #333;
color: white;
}
.navbar .logo {
font-size: 20px;
font-weight: bold;
}
.navbar .nav-links {
display: flex;
gap: 20px;
}这段代码实现了一个经典的导航栏：logo在左边，链接在右边，整体垂直居中。几行代码就搞定了一个专业级的导航栏布局！
三、Grid网格布局
如果说 Flexbox 是"一维布局专家"，那 Grid 就是"二维布局大师"。它让你可以同时控制行和列，特别适合做那种"几行几列"的整齐布局，比如相册、仪表盘、商品列表等。
1. 基本用法
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}这段代码创建了一个三列等宽的网格。fr 是 Grid 的特殊单位，表示"可用空间的一份"。1fr 1fr 1fr 就是三等分。
2. 核心属性
grid-template-columns：定义列。可以写固定值（200px）、比例（1fr 2fr）、重复（repeat(3, 1fr)表示三等分）。
grid-template-rows：定义行，用法和列类似。
gap：网格间距。
grid-column：让子元素跨越多列，比如 grid-column: span 2; 占两列。
grid-row：让子元素跨越多行。
3. 实战：响应式卡片网格
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
}
/* auto-fill + minmax 是Grid的"魔法组合"
意思是：每列最少250px，最多平分剩余空间
列数会根据容器宽度自动调整 */这个布局超级实用！不管屏幕多宽，卡片都会自动排列。屏幕宽就多放几列，屏幕窄就少放几列。这就是响应式布局的雏形。
四、Flexbox vs Grid：什么时候用哪个？
很多新手会纠结该用 Flexbox 还是 Grid。豆包给你一个简单的判断标准：
用 Flexbox：元素沿一个方向排列（一行导航、一列菜单、居中对齐）。这是绝大多数场景。
用 Grid：需要同时控制行和列（表格、相册、仪表盘、复杂的页面整体布局）。
实际开发中，最好的做法是大结构用 Grid，小组件用 Flexbox。页面整体用 Grid 划分成 header、sidebar、main、footer 这些区域，每个区域内部的元素排列用 Flexbox。
五、常见布局实战
下面豆包给大家演示两个最常见的页面布局：
1. 经典的圣杯布局（头部 + 左侧栏 + 主内容 + 右侧栏 + 底部）：
.page {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }看，用 Grid 的 grid-template-areas，你可以用"画图"的方式来定义布局，超级直观！
六、写在最后
Flexbox 和 Grid 是现代CSS布局的基石。一开始可能需要一些时间来熟悉各种属性，但一旦掌握，你的布局能力会突飞猛进。豆包建议你多做一些小练习：导航栏、卡片列表、仪表盘布局，这些都是很好的练习素材。
下一篇文章，咱们将进入JavaScript的世界——让网页从"静态"变成"动态"。这是前端开发中最有趣的部分，豆包已经迫不及待要教你了！
