在包装上居中弹性项目

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. 轴对齐：justify-content属性

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

有五个值适用于justify-content。以下是其中两个：

space-between

Flex 项目在行中均匀分布。

如果剩余的可用空间为负数或该行上只有一个 flex 项，则该值与 相同flex-start。

这解释了为什么您的项目在包装时左对齐space-between。

现在看看space-around：

space-around

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

如果剩余的可用空间为负数或该行上只有一个 flex 项，则该值与 相同center。

因此，要在 wrap 上居中对齐 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>

修正小提琴

Answer 2

注意：您必须对不同的宽度使用媒体查询。

无法检测它何时使用 css3 包装。

如果你想集中项目使用display:inline-flex、justify-content: center;容器和margin: 0 auto;类item

.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 中被迫保持单行的项目