Logo

菜单

发布于 2026-01-06 2 阅读
0

CSS Grid 和 Flexbox 简明指南

CSS Grid 和 Flexbox 简明指南

作者：穆罕默德·阿尔斯兰·萨尔瓦尔

介绍

Flexbox 通过空间分配和对齐功能，帮助创建一维布局。它无需使用浮动或定位，即可轻松设计响应式布局，极大地简化了 CSS 开发者的工作。

网格是一种二维布局模型，有助于创建布局并对齐其中的元素。它提供了一种包含行和列的布局系统，无需使用浮动和定位即可轻松设计网页。

使用 CSS 创建布局可能比较棘手，而 Flexbox 和 Grid 都可用于页面布局设计，这更增加了设计的复杂性。本指南将介绍 Flexbox 和 Grid 之间的一些区别。我们将探讨在设计布局时如何选择使用哪一种布局。

本指南将涵盖以下内容：

先决条件

  • CSS布局基础知识
  • 对 CSS Flexbox 的基本了解
  • 对 CSS Grid 的基本了解

子元素控制

Flexbox 为子元素提供了强大的控制功能。以下示例中有三个子元素。

如果设置了该选项display: flex，就会创建一个弹性布局。你会注意到，布局中并没有三个等宽的列。这是弹性盒子布局的默认行为，因为布局尺寸是自动计算的。

<div class="parent">
  <div class="child">
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit.</p>
  </div>
  <div class="child">
    <h3>Lorem ipsum</h3>
    <p>Aestiae voluptatum expedita minima doloribus nemo ipsa vel. Ducimus nam, vel rerum quisquam illum maxime cumque.</p>
  </div>
  <div class="child">
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae molestiae voluptatum expedita minima doloribus nemo ipsa vel. Ducimus nam, </p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.parent {
  display: flex;
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  padding: 1rem;
  border: 3px solid lime;
}

.child {
  padding: 1rem;
  border: 3px dashed red;
  background: white;
}
Enter fullscreen mode Exit fullscreen mode

弹性

如果你想创建三个宽度相等的列，不能在父元素中直接操作。你需要在子元素中设置 `<div>`width:100%或 `<div>`属性flex:1。这样会创建三个宽度相等的子元素。

基本上，子元素之所以拥有控制权，是因为父元素在 flexbox 布局中将控制权委托给了子元素。如果子元素的内容相同，它们的大小自然也相同，无需进行width:100%任何调整flex:1。

所以，在使用 flexbox 时我们需要格外小心。

Flex 2

与 Flexbox 不同，父元素可以完全控制 Grid 布局。让我们使用 Grid 布局创建上面的布局：

.parent {
  display: grid;
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  padding: 1rem;
  border: 3px solid lime;
}
Enter fullscreen mode Exit fullscreen mode

网格

display: flex如果我们改成这样，什么也不会发生display: grid。你必须采取其他措施才能真正把事情安排妥当。

所以，在父元素中添加这行代码grid-template-columns: 1fr 1fr 1fr。这样，内容就会适应创建的列。创建网格时，网格的子元素会适应这些单元格。


GitHub 支持横幅

内在和外在尺寸

在 CSS 中，尺寸有内在尺寸和外在尺寸之分，例如：

.intrinsic-size {
    width: auto;
}
.extrinsic-size {
    width: 500px;
}
Enter fullscreen mode Exit fullscreen mode

这是CSS布局工作原理中非常重要的一部分。在固有尺寸设置中，浏览器会自动计算元素的大小。

外部尺寸调整是指声明一个特定的宽度。而 Flexbox 则主要依赖元素在缩放时的内在尺寸调整。

<div class="product">
  <img src="https://assets.codepen.io/308367/betteroutreach-logo.avif">
  <div class="product__info">
    <h2>Product One</h2>
    <p>A collection of the best cold email templates ever sent</p>
    <div class="product__meta">
      <div>Free Options</div>
      <div>Email</div>
    </div>
  </div>
</div>

<div class="product">
  <img src="https://assets.codepen.io/308367/sliderule-logo.avif">
  <div class="product__info">
    <h2>Product two</h2>
    <p>The no-code rules engine for risk & fraud</p>
    <div class="product__meta">
      <div>Free</div>
      <div>Social Network</div>
    </div>
  </div>
</div>

<div class="product">
  <img src="https://assets.codepen.io/308367/warmy-logo.avif">
  <div class="product__info">
    <h2>Product three</h2>
    <p>Auto all-in-one tool to make your email channel reliable</p>
    <div class="product__meta">
      <div>Free Options</div>
      <div>Email</div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.product__meta {
  font-size: 12px;
  outline: 3px solid red;
  display: flex;
  gap: 1rem;
}

.product__meta > * {
  border: 3px solid lime;
}

body {
  display: grid;
  padding: var(--size-9);
  align-content: start;
  gap: var(--size-9);
  background: white;
}

.product {
  display: grid;
  gap: var(--size-5);
  grid-template-columns: 5rem 1fr;
}

.product__info {
  display: grid;
  grid-template-rows: min-content;
}
Enter fullscreen mode Exit fullscreen mode

Flexbox 首先会计算内容的大小。这样一来display:flex，元素的大小就完全取决于内容的大小。

如果在产品元数据中启用 flex 布局，则两列的宽度将根据内容大小自动调整。这有助于创建所需的布局。因此，动态列布局可以适应这种布局。

儿童控制

与网格布局不同，网格布局中每一列都会占据整个宽度，或者需要在父元素中指定大小。

.product__meta {
  font-size: 12px;
  outline: 3px solid red;
 // ====>
  display: grid;
 // <====
  gap: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

儿童控制

因此，在这种情况下，Flexbox 布局能提供更大的灵活性。而 Grid 布局则有助于创建更可控的布局。

盒式对齐

别忘了盒子对齐。因为 Flexbox 可以轻松地对齐元素。在 Flexbox 出现之前，要正确地对齐元素非常困难。人们需要使用各种技巧和窍门才能将元素对齐到所需的布局中。

Flexbox 也可以用于网格布局。每当您需要创建具有特定对齐方式或空间分布的布局时，您都可以考虑使用 Flexbox。

Flexbox 和 Grid 的行为

网格系统在创建更复杂、更有条理的布局时非常有用。设计页面布局时，可以使用网格系统来构建整体布局。而弹性布局则更适合创建单个元素。

由于 Flexbox 基于固有尺寸，因此当布局取决于内容时，可以使用 Flexbox。另一方面，当内容取决于布局时，Grid 布局则更为适用。

用例

Flexbox 非常适合帮助对齐内容和移动模块，是应用程序组件和小规模布局的绝佳选择，而网格布局则更适合大面积布局。

弹性方向允许您垂直或水平对齐内容，这在创建反向行或列时非常有用。

使用 flexbox：

  • 如果您的项仅位于一个维度上，无论是行还是列。
  • 如果内容决定布局，那么就采取了内容优先的方法。
  • 如果您希望保持容器内的项目彼此独立。

使用网格：

  • 当需要将项目排列成行和列时。
  • 当布局决定内容时，它采用的是布局优先的方法。
  • 当您想要设计页面的整体布局时。

浏览器支持

弹性支撑

网格支持

结论

当你需要创建网页的外部布局时，网格系统是你的最佳帮手。有了它，复杂的布局设计不再遥不可及，而且还能实现响应式设计！

总而言之，何时应该使用 Flexbox，何时应该使用 Grid。虽然 Flexbox 和 Grid 都可以用于设计任何布局，但您应该选择阻力最小的方案。


Discord 横幅

构建基于 React 的 CRUD 应用程序，不受任何限制

构建 CRUD 应用涉及许多重复性任务，会耗费您宝贵的开发时间。如果您是从零开始，还需要为应用的关键部分（例如身份验证、授权、状态管理和网络）实现自定义解决方案。

如果您对具有强大架构和丰富行业最佳实践的无头框架感兴趣，并希望将其应用于您的下一个 CRUD 项目，不妨了解一下refine。


优化博客徽标

refine是一个基于 React 的开源框架，用于构建不受限制的 CRUD 应用程序。
它可以将开发速度提升高达3 倍，同时又不影响样式、自定义和项目工作流程的自由度。

refine从设计上就是无头的，它开箱即用地连接了30 多个后端服务，包括自定义 REST 和 GraphQL API。

访问refine GitHub 存储库以获取更多信息、演示、教程和示例项目。

文章来源：https://dev.to/refine/a-brief-guide-for-css-grid-and-flexbox-3ild
如何使用 CSS 创建侧边栏导航菜单
Git 入门指南