html - 在包装上居中 flex 元素

Question

我已经设置了一个 flexbox，其中包含两个元素，它们应该在正常屏幕的左侧和右侧。

如果屏幕不够大，无法将两者并排显示，它应该环绕，但它们应该居中而不是左对齐。

我尝试了不同的解决方案(比如在子项上使用 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”方法来做到这一点(这需要我设置一定的大小，因此如果大小不灵活元素的变化)？

Answer 1

这可能不适用于您的情况，但值得一提的是 justify-content: space-between 和 justify-content: space-around 之间鲜为人知的区别.

来自 flexbox 规范:

8.2. Axis Alignment: the justify-content property

The justify-content property aligns flex items along the main axis of the current line of the flex container.

justify-content 有五个值。这是其中两个:

space-between

Flex items are evenly distributed in the line.

If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start.

这解释了为什么您的元素在换行时左对齐并带有 space-between。

现在看看space-around:

space-around

Flex items are evenly distributed in the line, with half-size spaces on either end.

If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to 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>

Revised Fiddle