主流 CSS 布局：CSS Grid 和 CSS Flexbox-JavaScript中文网-JavaScript教程资源分享门户

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 布局示例：

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 10px;
}

.item {
  background-color: #eee;
  text-align: center;
  font-size: 48px;
}

.item1 {
  grid-row: 1/3;
  grid-column: 1/2;
}

.item2 {
  grid-row: 1/2;
  grid-column: 2/4;
}

.item3 {
  grid-row: 1/2;
  grid-column: 1/2;
}

.item4 {
  grid-row: 2/3;
  grid-column: 2/3;
}

.item5 {
  grid-row: 2/3;
  grid-column: 3/4;
}

.item6 {
  grid-row: 3/4;
  grid-column: 1/4;
}

.item7 {
  grid-row: 1/2;
  grid-column: 4/5;
}

.item8 {
  grid-row: 2/4;
  grid-column: 4/5;
}

.item9 {
  grid-row: 3/4;
  grid-column: 3/4;
}

通过以上代码可以实现一个 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>

.container {
  display: flex;
  justify-content: space-between; /* 间隔排列 */
}

.item {
  background-color: #eee;
  text-align: center;
  font-size: 48px;
  flex-basis: 20%; /* 宽度为 20% */
}

通过以上代码可以实现一个等分布局，子元素之间的距离为等分布局。

总结

CSS Grid 和 CSS Flexbox 是当前主流的 CSS 布局方式，都具有自己的特点和适用范围。在实际开发中应根据业务需求和布局效果选择合适的方式，以达到更好的开发效率和用户体验。希望本文的内容能够为你的学习和工作提供帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6596624feb4cecbf2da379ab

主流 CSS 布局：CSS Grid 和 CSS Flexbox