Flexbox + Grid 双剑合璧，超实用布局 (附完整示例代码)
在前端开发中，布局是非常重要的一部分。随着 Web 技术的不断发展，我们有了更多的选择来实现复杂的布局。其中，Flexbox 和 Grid 是两种非常强大的工具，它们可以帮助我们轻松地创建复杂的布局，而不需要使用复杂的 CSS 技巧或者 JavaScript。
在本文中，我们将深入探讨 Flexbox 和 Grid 的使用，介绍它们的优点和适用场景，并提供一些实用的示例代码帮助你更好地理解和应用这两种布局技术。
Flexbox 布局
Flexbox 是一种非常直观和易于理解的布局模式，它将容器划分为一个个的伸缩容器和伸缩项。伸缩容器是一个包含着一组伸缩项的容器，而伸缩项则是容器内的子元素。通过设定伸缩项的属性，我们可以控制它们在伸缩容器内的排列方式。
以下是一些常用的 Flexbox 属性：
display: flex;将父元素设置为 Flexbox 容器。flex-direction控制伸缩项的排列方向。row（水平方向）；column（垂直方向）；row-reverse（水平方向反转）；column-reverse（垂直方向反转）。
justify-content控制伸缩项在主轴上的对齐方式。flex-start（默认，左对齐）；flex-end（右对齐）；center（居中对齐）；space-between（平均分布，左右两端留空）；space-around（平均分布，两端留空）。
align-items控制伸缩项在交叉轴上的对齐方式。stretch（默认，拉伸）；flex-start（上对齐）；flex-end（下对齐）；center（居中对齐）；baseline（基线对齐）。
flex-wrap控制伸缩项是否换行。nowrap（默认，不换行）；wrap（换行）；wrap-reverse（换行并反转）。
以下是一个简单的 Flexbox 实例，使用了 flex-direction、justify-content 和 align-items 这三个属性来控制伸缩项在容器中的排列方式：
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- --------------- ---- ---------------- ------- ------------ ------- - ---------- - ------ ------ ------- ------ ----------------- ---- ------ ------ ----------- ------- ---------- ----- ------- ----- -展开代码
上面的代码将四个 div 元素放在了一个 Flexbox 容器中。通过设置 flex-direction: row，我们让四个元素在水平方向上排成一行；通过设置 justify-content: center;，我们让它们居中对齐；通过设置 align-items: center;，我们让它们在垂直方向上也居中对齐。这样，我们就得到了一个非常简单的水平居中的布局。
Grid 布局
相比于 Flexbox，Grid 布局能够更好地处理二维布局。它将容器划分为一个个的网格，每个网格可以放置一个或多个子元素。与 Flexbox 不同的是，Grid 布局既可以在行上排列子元素，也可以在列上排列子元素，从而实现更加灵活的布局方式。
以下是一些常用的 Grid 属性：
display: grid;将父元素设置为 Grid 布局容器。grid-template-columns定义每一列的宽度或百分比。grid-template-rows定义每一行的高度或百分比。grid-column控制子元素在列上的起始位置和结束位置。grid-row控制子元素在行上的起始位置和结束位置。grid-area控制子元素在行和列上的起始位置和结束位置。grid-column-gap定义列之间的间隔。grid-row-gap定义行之间的间隔。
以下是一个简单的 Grid 实例，使用了 grid-template-columns、grid-template-rows、grid-column 和 grid-row 来控制子元素在容器中的排列方式：
<div class="grid-container"> <div class="grid-item one">1</div> <div class="grid-item two">2</div> <div class="grid-item three">3</div> <div class="grid-item four">4</div> <div class="grid-item five">5</div> <div class="grid-item six">6</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ---------------- ----- ------------- ----- - ---- - ------------ - - -- --------- - - -- - ---- - ------------ -- --------- - - -- - ------ - ------------ -- --------- - - -- - ----- - ------------ -- --------- - - -- - ----- - ------------ - - -- --------- - - -- - ---- - ------------ - - -- --------- - - -- -展开代码
在上面的代码中，我们将六个 div 元素放在了一个 Grid 容器中。通过 grid-template-columns 和 grid-template-rows 属性，我们将容器分成了 3 列和 2 行。接下来，我们使用 grid-column 和 grid-row 属性来控制每一个子元素在行和列上的开始和结束位置。
通过上面的代码，我们可以得到一个类似于下图的网格布局：
┌─────────┬─────────┬────────────────────────┐ │ 1 │ 2 │ 4 │ │ │─────────┤ ────────────┤ │ │ 3 │ 5 │ ├─────────┼─────────┼────────────────────────┤ │ 6 │ │ │ │ │ │ │ └─────────┴─────────┴────────────────────────┘
Flexbox 和 Grid 双剑合璧
虽然 Flexbox 和 Grid 在很多情况下可以独立应用，但是它们的结合可以帮助我们更灵活地处理 Web 页面的布局。下面是一个简单的示例，展示了如何将 Flexbox 和 Grid 结合起来实现一个完整的布局：
-- -------------------- ---- ------- ---- ------------------ ---- --------------------------- ---- ---------------- ---- ----------------------------- ---- ------------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------ ------ ---- --------------------------- ------展开代码
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- ---- ------------------- ---- --- ----- ---------------- ----- ------------- ----- ------- ----- - ------- - ------------ - - -- --------- - - -- ----------------- ----- ------ ------ ----------- ------- -------- ----- - -------- - -------- ----- --------------- ---- - -------- - ----------------- ----- ------- --- ----- ----- -------- ----- ----------- ------ ------ ----- - ----- - -------- ----- --------------- ------- ---------- -- -------- ----- ----------------- ----- - ----- - ----------------- ------ ------- --- ----- ----- -------- ----- ------- ---- -- ----------- ------- - ------- - ------------ - - -- --------- - - -- ----------------- ----- ------ ------ ----------- ------- -------- ----- ----------- ----- -展开代码
上面的代码将整个页面分为了三行和两列，其中第一行和第三行的高度是由它们的内容所决定的；第一列的宽度是 15%，第二列的宽度是剩余部分的 1fr。在第一行和第三行的位置上，我们使用了 Grid 布局，而在第二行的位置上，我们使用了 Flexbox 布局。这样做的好处是：
- 使用 Grid 布局可以让我们轻松地控制第一行和第三行的高度和宽度；
- 使用 Flexbox 布局可以让我们轻松地控制第二行中的两个子元素的排列方式。
在本文中，我们深入学习了 Flexbox 和 Grid 这两种布局技术，介绍了它们的优点和适用场景，并提供了一些实用的示例代码。希望能够帮助你更好地应用这两种布局技术，为你的 Web 页面创建出更优秀的布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c25552314edc2684b7bb07
