关于 Flexbox 的 3 个技巧，让你的 CSS 变得更好

嘿伙计们！

我想讨论一下为什么column-gap比更好justify-content，justify-content: center以及如何align-items: center导致元素丢失，弹性项目被阻止是什么意思！

但在开始阅读之前，我在我的 Substack 简报上留下了关于 CSS 的链接。你知道该怎么做了😎

另外，非常感谢我的赞助商：Ben Rinehart、Sergio Kagiema、Jesse Willard、Tanya Ten、Konstantinos Kapenekakis。没有他们的支持，我不可能写出这篇文章。

我们走吧！

justify-content对比column-gap

我很讨厌看到开发者使用space-between或space-around值来定位网格元素。这是一种不好的做法，会导致显示不正确。当人们这样做时，他们不会想到项目的数量可能会改变。

例如，如果在 4 列网格中添加更多元素，它们将不会显示在行首。因此，我看到了破碎的网格。

有一个使用column-gap属性的好方法。这个属性与 Flexbox 结合使用，您只需定义元素之间的间隙即可。浏览器会完成所有剩余的工作。这样，您就可以获得包含任意数量元素的安全网格。

不要这样做

<div class="grid">
  <div class="item"><span>item 1</span></div>
  <div class="item"><span>item 2</span></div>
  <div class="item"><span>item 3</span></div>
  <div class="item"><span>item 4</span></div>
  <div class="item"><span>item 5</span></div>
</div>

.grid {
  display: flex;
  justify-content: space-between; /* or space-around */
}

.item {
  width: 30%;
}

你可以用这个

<div class="grid">
  <div class="item"><span>item 1</span></div>
  <div class="item"><span>item 2</span></div>
  <div class="item"><span>item 3</span></div>
  <div class="item"><span>item 4</span></div>
  <div class="item"><span>item 5</span></div>
</div>

.grid {
  display: flex;
  column-gap: 5%;
}

.item {
  width: 30%;
}

justify-content和align-itemsvsmargin: auto

当我们解决对齐问题时，我们喜欢使用对齐属性，例如justify-content或align-items。但很少有人知道这些属性可能会导致数据丢失，尤其是在垂直对齐时。

这是由这些属性的工作原理决定的。这个过程包含两个术语。首先，对齐容器是一个声明对齐属性的元素。

第二，对齐主体是对齐容器内的元素。对齐属性会影响它们。

因此，当对齐主体的尺寸大于对齐容器的尺寸时，就会出现这种情况。在默认对齐模式下，这会导致溢出和数据丢失。因此用户会看到被裁剪的元素。

我创建了一个带有模态框元素的示例来展示这种行为。起初，文本很短。但是当我们增加文本长度时，标题和关闭按钮就消失了。

我们可以使用自动边距来解决这个问题，因为它会使用额外的空间来对齐元素，并且不会导致溢出。看看元素是如何不再丢失的。

不要这样做

<div class="modal">
  <div class="modal__main"></div>
</div>

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}

你可以用这个

<div class="modal">
  <div class="modal__main"></div>
</div>

.modal {
  display: flex;
}

.modal__main {
  margin: auto;
}

弹性项目被块化

当我们使用 flexbox 时，有一个重要的特性。当你display: flex为元素编写时，它的所有子元素（flex 项目）都会被块化。

这是什么意思？所有设置了 display 属性值为inline、inline-block、inline-flex或inline-grid的flex 项inline-table都会被更改。inline和inline-block会更改为block、inline-flex-> flex、inline-grid->grid和inline-table-> table。

因此，不要使用block、inline和inline-block值，您的代码将被清晰地保存。

不要这样做

.grid {
  display: flex;
}

.item {
  display: block; /* inline or inline-block */
}

你可以用这个

.grid {
  display: flex;
}