在包裹上居中弯曲项目

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/

第一个容器是预期的定位，第二个容器在较小的屏幕上模拟同一个容器，注意向左对齐。

有没有办法定义弹性框在包装时以不同方式对齐项目，或者我只能使用“@media screen”方法来做到这一点（这需要我设置一定的大小，因此如果大小不灵活的项目变化）？

Answer 1

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

来自 flexbox 规范：

8.2. Axis Alignment: the justify-content property

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

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

space-between

弹性项目均匀分布在行中。

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

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

现在看space-around：

space-around

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

如果剩余的可用空间为负数或行上只有一个 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>

Revised Fiddle

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 时会自动换行。

Click to see center aligned example in 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;
}

Click to see items forced to stay single line in JsFiddle