在进行前端开发时，布局是一个不可避免的问题。随着浏览器技术的不断更新，CSS 中的布局也不断发展。现在，我们有两种主流的 CSS 布局方式：CSS Grid 和 CSS Flexbox。这两种布局方式各有优劣，本文将深入讲解这两种布局的使用方法，帮助你更高效地进行布局。
CSS Grid
CSS Grid 是一种二维布局方式，将父元素划分为网格，让子元素在网格中进行布局。CSS Grid 支持多行多列，通过网格中的行和列，可以自由布局子元素。
使用方法
首先，我们需要使用 display: grid 属性声明该元素是一个网格容器，并使用 grid-template-columns 和 grid-template-rows 属性来设置列数和行数。例如：
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}以上代码定义了一个有三列两行的网格容器，其中第一列和第三列的宽度为网格容器宽度的 1/3，第二列的宽度为网格容器宽度的 2/3，第一行高度为 100 像素，第二行高度为 200 像素。
接着，我们可以使用 grid-column 和 grid-row 属性来设置子元素的位置和跨度。例如：
.item {
grid-column: 2 / 4;
grid-row: 1 / 3;
}以上代码定义了一个子元素，其占据网格的第二列到第三列、第一行到第二行。
示例代码
以下代码演示了如何使用 CSS Grid 实现一个响应式布局，当屏幕宽度小于 768 像素时，变为单列布局。
HTML：
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
CSS：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ---------------- ------------- ------ --------- ----- - ----- - ----------------- ----- -------- ----- ----------- ------- -
CSS Flexbox
CSS Flexbox 是一种一维布局方式，将父元素内的子元素，沿水平或垂直方向排列。CSS Flexbox 的优势在于能够轻松实现弹性布局，适应不同的设备和视窗大小。
使用方法
首先，我们需要使用 display: flex 属性声明该元素是一个 flex 容器，并使用 flex-direction 属性来设置子元素的排列方向。例如：
.container {
display: flex;
flex-direction: column;
}以上代码定义了一个纵向排列的 flex 容器。默认情况下，子元素会横向排列。
接着，我们可以使用 justify-content 和 align-items 属性来设置子元素在 flex 容器内的对齐方式。例如：
.container {
display: flex;
justify-content: center;
align-items: center;
}以上代码定义了一个子元素居中对齐的 flex 容器。justify-content 属性用于设置子元素在主轴上的对齐方式，align-items 属性用于设置子元素在交叉轴上的对齐方式。
示例代码
以下代码演示了如何使用 CSS Flexbox 实现一个响应式布局，当屏幕宽度小于 768 像素时，变为纵向排列。
HTML：
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
CSS：
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
-
----- -
----------------- -----
-------- -----
----------- -------
----------- --------------- - ------
------- -----
-
------ ----------- ------ -
---------- -
--------------- -------
-
----- -
----------- -----
-
-总结
CSS Grid 和 CSS Flexbox 都是现代 CSS 布局的关键技术，可以让我们更高效地进行网页布局。使用前需要仔细考虑每个布局的特点和适用情况，灵活运用才能让布局更加高效和便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64582a41968c7c53b0a9a631