Question

是否可以在flex元素内的项目之间创建均匀间距？我尝试使用align-content: space-around，但似乎没有效果。这可能吗？如果没有，即使我不使用flex，还有另一种方法可以实现吗？

在下面的示例中，我甚至水平间隔，但不是垂直间距。为了清楚起见，我希望水平间距为垂直相同。

示例代码：

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
}

.item {
  width: 19%;
  height: 50px;
  background-color: yellowgreen;
}

.red {
  background-color: red;
}

＆＃13;

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item red"></div>
  <div class="item red"></div>
  <div class="item red"></div>
  <div class="item red"></div>
  <div class="item red"></div>
</div>

＆＃13;

Answer 1

如果你想在两个轴上使用等间距，请使用边距。

如果您想在每个轴上均匀间距，请考虑以下事项：

浏览器提供默认的宽度和高度设置。
水平地，您正在使用width: 100%。
但纵向，您正在使用height: auto。

因此，您可以在两个轴上实现均匀间距，因为可用空间不同。

特别是，justify-content: space-between可以正常工作，因为主轴上有自由空间。但是align-content: space-around无法正常工作，因为横轴上没有空闲空间。

默认情况下，块元素会占用其父元素的整个宽度。

这就是他们如何满足他们的设计要求，即垂直堆叠。

9.4.1 Block formatting contexts

在块格式化上下文中，框一个接一个地布局，   垂直，从包含块的顶部开始。

但是，此行为不会延伸到高度。

默认情况下，大多数元素都是其内容的高度（height: auto）。

与宽度不同，如果需要额外的空间，则需要指定高度。

因此，请记住以下两点：

除非您想要全宽，否则您需要定义块元素的宽度
除非您想要内容高度，否则您需要定义元素的高度

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
  height: 100vh; /* new */
}

.item {
  width: 19%;
  height: 50px;
  background-color: yellowgreen;
}

.red {
  background-color: red;
}

body { margin: 0; } /* remove default margins */

＆＃13;

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item red"></div>
  <div class="item red"></div>
  <div class="item red"></div>
  <div class="item red"></div>
  <div class="item red"></div>
</div>

＆＃13;

Answer 2

您需要使用对齐内容来对齐水平项。

比使用对齐项将它们垂直对齐。

align-items: center;
justify-content: center;

Answer 3

您可以在项目类中使用flex而不是width 例如：flex：1 1 19％; （flex-grow的缩写：1，flex-shrink：1，flex-basis：19％）

.item {
  flex: 1 1 19%;
  margin: 4px;
}

Answer 4

在第一行元素中使用相同数量的margin-bottom。你可以这样做，

element:nth-child(1),
element:nth-child(2)..to..(5){
  margin-bottom: same amount of margin you put in right;
}

如果有什么不起作用，请在下方发表评论......

甚至在弯曲时垂直和水平间隔

4 个答案: