Grid 与 Flex 布局的用法及区别_display grid和flex-CSDN博客

本文链接：https://blog.csdn.net/weixin_39100915/article/details/145202923

在前端开发中，布局是至关重要的一环。Grid 和 Flex 布局作为现代 CSS 中强大的布局工具，各自有着独特的用法和优势。本文将深入探讨这两种布局方式的用法，并通过案例清晰地展示它们之间的区别。

Grid 布局

Grid 布局即网格布局，它将网页划分为一个个网格，可以通过定义行和列来精确控制元素的位置。

基本用法

容器属性

- display: grid：将元素设置为网格容器。
- grid-template-columns 和 grid-template-rows：定义网格的列和行的大小。例如：grid-template-columns: 1fr 2fr 1fr; 表示创建三列，第一列和第三列宽度相同，第二列宽度是它们的两倍。fr 是一种灵活的长度单位，用于分配剩余空间。
- grid-gap：设置网格之间的间隙，包括行间距和列间距。例如：grid-gap: 10px;

项目属性

- grid-column-start、grid-column-end、grid-row-start、grid-row-end：指定项目在网格中的起始和结束位置。例如：grid-column-start: 2; grid-column-end: 4; 表示该项目从第二列开始，到第四列结束。

案例

假设我们要创建一个简单的网页布局，包含一个导航栏、一个主内容区域和两个侧边栏。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
   .container {
      display: grid;
      grid-template-columns: 1fr 3fr 1fr;
      grid-gap: 10px;
    }
   .nav {
      grid-column-start: 1;
      grid-column-end: 4;
      background-color: lightblue;
    }
   .main {
      grid-column: 2;
      background-color: lightgreen;
    }
   .sidebar1 {
      background-color: pink;
    }
   .sidebar2 {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="nav">导航栏</div>
    <div class="main">主内容区域</div>
    <div class="sidebar1">侧边栏1</div>
    <div class="sidebar2">侧边栏2</div>
  </div>
</body>
</html>

在这个案例中，我们通过 Grid 布局轻松实现了复杂的多列布局。

在线链接

https://codepen.io/Judy1623/pen/NPKzmBB

Flex 布局

Flex 布局即弹性布局，主要用于一维布局，比如水平或垂直方向排列元素。

基本用法

容器属性

- display: flex：将元素设置为弹性容器。
- flex-direction：定义主轴方向，取值有 row（默认，水平方向从左到右）、row - reverse（水平方向从右到左）、column（垂直方向从上到下）、column - reverse（垂直方向从下到上）。
- justify-content：定义在主轴上的对齐方式，如 flex-start（默认，左对齐或上对齐）、flex-end（右对齐或下对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）、space-around（项目两侧间隔相等）。
- align-items：定义在交叉轴上的对齐方式，取值与 justify-content 类似，用于控制元素在垂直于主轴方向上的对齐。

项目属性

- flex-grow：定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。例如：flex-grow: 1; 表示该项目将按比例分配剩余空间。
- flex-shrink：定义项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
- flex-basis：定义在分配多余空间之前，项目占据的主轴空间。

案例

创建一个简单的水平导航菜单。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
   .nav {
      display: flex;
      justify-content: space-around;
      background-color: lightblue;
    }
   .nav-item {
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="nav">
    <div class="nav-item">首页</div>
    <div class="nav-item">产品</div>
    <div class="nav-item">关于我们</div>
    <div class="nav-item">联系我们</div>
  </div>
</body>
</html>

在这个案例中，通过 Flex 布局实现了导航菜单的水平排列且均匀分布。

在线链接🔗

https://codepen.io/Judy1623/details/jENKoPo

两者区别

布局维度

- Grid 布局是二维的，它可以同时处理行和列的布局，适用于复杂的多列多行布局场景，如页面整体布局。
- Flex 布局主要是一维的，侧重于在一个方向（水平或垂直）上排列元素，适合简单的线性排列场景，如导航栏、图片画廊等。

容器与项目关系

- 在 Grid 布局中，容器对项目的位置控制更为精确，通过定义网格线来确定项目的位置。
- Flex 布局中，容器主要控制项目的排列方向和对齐方式，项目的尺寸和顺序更多地由自身的属性（如flex-grow、flex-shrink等）来决定。

对齐方式

- Grid 布局有专门的align-content和justify-content属性用于控制整个网格内容在容器中的对齐，同时align-items和justify-items用于控制单个项目的对齐。
- Flex 布局通过justify-content控制主轴上的对齐，align-items控制交叉轴上的对齐。