将flex项目在换行时居中对齐

Question

我设置了一个弹性盒子，其中包含两个项目，应该在正常屏幕上分别位于左侧和右侧。

如果屏幕不足以同时显示它们，它们应该换行，但此时它们应该居中而不是靠左对齐。

我尝试了不同的解决方案（例如在子项上使用margin: auto），但即使在同一行时也将它们更多地对齐到中心。

这是一个简化的示例：

.container {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid black;
  margin-bottom: 25px;
}
.large {
  width: 500px;
}
.small {
  width: 175px;
}
.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 25px 0px;
}

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

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

https://jsfiddle.net/SoWhy/zfx4ub8x/

第一个容器是预期的位置，第二个容器模仿了较小屏幕上的同一容器，注意左对齐。

是否有一种方法可以定义flexbox在换行时以不同的方式对齐项目，还是只能使用“@media screen”方法来实现（这需要我设置固定大小，因此如果项目的大小改变，它就不太灵活）？

- SoWhy

---

不，Flexbox 无法做到那个...这是一个常见的需求。 - Paulie_D

Answer 1

这种方法可能不适用于您的情况，但值得提及justify-content: space-between和justify-content: space-around之间较少知名的差异。

根据flexbox规范：

8.2. 轴对齐: justify-content属性

justify-content属性沿着flex容器当前行的主轴对齐flex项目。

justify-content有五个值可应用。这里介绍其中两个：

space-between

在该行中，flex项目平均分布。

如果剩余的自由空间为负数或该行只有一个flex项目，则此值等同于flex-start。

这就解释了为什么使用space-between时，项目在换行时会向左对齐。

现在看看space-around:

space-around

Flex项目在行中均匀分布，两端有一半大小的空格。

如果剩余的自由空间为负或者该行只有一个flex项目，则该值与center相同。

因此，在换行时居中对齐flex项目，考虑使用space-around。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* ADJUSTMENT */
  border: 1px solid black;
}
.item {
  width: 200px;
  height: 100px;
  background-color: blue;
  margin: 25px;
}

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

修订版 Fiddle

- Michael Benjamin

---

使用 space-around 属性会在每个元素两端产生“半个空格”的间隔（根据您发布的说明）。我不想要这些间隔，我希望在未换行时，各个项之间尽可能地远离。 - SoWhy

25像素的边距只是为了在示例中更好地显示。对于造成的困惑，我们深感抱歉。在实际应用中，边距将是“25像素0像素”，即左右没有边距。 - SoWhy

如果有一个可以完成工作的黑客，我总是乐意尝试。;-) - SoWhy

是的，我明白。我的回答旨在揭示“space-around”居中特性，以帮助您或其他人。 - Michael Benjamin

正如@SoWhy所说，这个答案是错误的 - 当换行时它可以工作，但当在同一行时就不行了，因为项目和边缘之间有额外的间距。 - mash

Answer 2

注意：您需要使用媒体查询来适应不同的宽度。

无法使用CSS3检测包装时机。

如果您想要居中项目，请在容器上使用"display:inline-flex"和"justify-content:center;"，并在"class item"上使用"margin:0 auto;"。

.container {
  display: flex;
  align-items: flex-end; 
  flex-wrap: nowrap;
  justify-content: space-between;
  border: 1px solid black;
  margin-bottom: 25px;
}
.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 25px;
  margin: 0 auto;
}

当容器大小小于200px时，它会换行。

点击查看在JsFiddle中居中对齐的示例

如果您想将项目保持在单行中flex-wrap: nowrap - 这将强制弹性项目保持在单行中。

因此，.container的样式将如下所示。

.container {
  display: flex;
  align-items: flex-end; 
  flex-wrap: nowrap;
  justify-content: space-between;
  border: 1px solid black;
  margin-bottom: 25px;
}

点击查看在JsFiddle中强制保持单行的项目

- Md. Monirul Alom

---

我不希望它们停留在同一行上。在小设备上，我确实希望它们换行 - 只是对齐方式不同。您的解决方案会使项目变小。 - SoWhy

@SoWhy 你需要使用媒体查询来适应不同的宽度。我的答案已经更新，请查看。 - Md. Monirul Alom