CSS 布局是前端开发中最重要的技能之一，不同的布局方式可以实现不同的页面效果。目前主流的 CSS 布局方式有两种：CSS Grid 和 CSS Flexbox。本文将详细介绍它们的特点和使用方法，并包含示例代码，希望能对你的学习和工作有所帮助。
CSS Grid
CSS Grid 是一个二维的网格布局系统，它可以通过定义行和列来控制布局，在支持 CSS Grid 的浏览器中可以实现高度自由度的布局效果。
如何使用 CSS Grid
使用 CSS Grid 需要在父元素中设置 display: grid 属性即可，同时也需要设置网格行和网格列的数量或大小。网格的行和列可以通过 grid-template-rows/grid-template-columns 属性来设置，如下所示：
.container {
display: grid;
grid-template-rows: 100px 200px 300px; /* 三个行，分别高度为 100px、200px、300px */
grid-template-columns: 1fr 2fr 1fr; /* 三个列，分别自动充满 1/4、1/2、1/4 的宽度 */
}在子元素中可以使用 grid-row/grid-column 属性来控制子元素占据的网格单元格，如下所示：
.item {
grid-row: 1/2; /* 在第一行占据一个单元格 */
grid-column: 1/3; /* 在第一列和第二列占据两个单元格 */
}CSS Grid 的特点
CSS Grid 相对于传统的浮动布局和 Flexbox 布局，具有以下优点：
- 可以实现高度自由度的布局，支持复杂的网格结构和区域的分配；
- 支持响应式布局，可以通过 media queries 和 grid-template-areas 实现移动端和桌面端的适配；
- 对于多栏布局、流式布局和圣杯布局等传统布局方式，CSS Grid 可以更简洁、更易于理解和维护。
CSS Grid 示例代码
下面是一个简单的 CSS Grid 布局示例：
-- -------------------- ---- ------- ---- ------------------ ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ------
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ------- --------- ----- - ----- - ----------------- ----- ----------- ------- ---------- ----- - ------ - --------- ---- ------------ ---- - ------ - --------- ---- ------------ ---- - ------ - --------- ---- ------------ ---- - ------ - --------- ---- ------------ ---- - ------ - --------- ---- ------------ ---- - ------ - --------- ---- ------------ ---- - ------ - --------- ---- ------------ ---- - ------ - --------- ---- ------------ ---- - ------ - --------- ---- ------------ ---- -
通过以上代码可以实现一个 3x3 的网格布局。
CSS Flexbox
CSS Flexbox 是一个单一维度（一行或一列）的布局系统，它可以让容器中的子元素按照一定的顺序和比例排列，支持快速实现居中布局、等分布局和流式布局等效果。
如何使用 CSS Flexbox
使用 CSS Flexbox 需要在父元素中设置 display: flex 属性即可，同时也需要设置子元素的排列方式。子元素的排列方式可以通过 justify-content 和 align-items 来设置，如下所示：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}在子元素中可以使用 flex 属性来控制子元素的比例和顺序，如下所示：
.item {
flex: 1; /* 等分布局 */
order: 2; /* 第二个排在第一个后面 */
}CSS Flexbox 的特点
CSS Flexbox 相对于传统的浮动布局和 Grid 布局，具有以下优点：
- 可以实现快速的等分布局、居中布局和流式布局等效果，对于单一维度的布局更加简单；
- 对于多个不同高度的子元素，CSS Flexbox 可以实现自适应的布局，不需要在 CSS 中对每个子元素进行计算和设置；
- 对于相对简单的业务场景，CSS Flexbox 更加轻便和灵活，可以快速达到预期的布局效果。
CSS Flexbox 示例代码
下面是一个简单的 CSS Flexbox 布局示例：
<div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- -- ---- -- - ----- - ----------------- ----- ----------- ------- ---------- ----- ----------- ---- -- --- --- -- -
通过以上代码可以实现一个等分布局，子元素之间的距离为等分布局。
总结
CSS Grid 和 CSS Flexbox 是当前主流的 CSS 布局方式，都具有自己的特点和适用范围。在实际开发中应根据业务需求和布局效果选择合适的方式，以达到更好的开发效率和用户体验。希望本文的内容能够为你的学习和工作提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6596624feb4cecbf2da379ab