在包裹上居中弯曲项目

Posted 2023-03-05

【中文标题】在包裹上居中弯曲项目

【英文标题】：Center flex items on wrap

【发布时间】：2016-11-12 10:49:59

【问题描述】：

我已经设置了一个包含两个项目的 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”方法来做到这一点（这需要我设置一定的大小，因此如果大小不灵活的项目变化）？

【问题讨论】：

不，flexbox 不能这样做。这是一个常见的请求。

【参考方案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

【讨论】：

但是使用空格，这些项目将有“两端的半角空格”（根据您发布的解释）。我不想要那些空间，我希望物品在未包装时尽可能分开。

25px 的边距只是为了在示例中更好地看到它们。对困惑感到抱歉。在实际应用中，边距为“25px 0px”，即。 e.左右两边没有边距

如果有一个黑客可以完成这项工作，我总是愿意接受。 ;-)

是的，我明白了。我回答的目的是揭示space-around 的居中功能，以防它对您或其他人有所帮助。

【参考方案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

【讨论】：

我不希望他们停留在一行。在小型设备上，我确实希望它们被包裹起来——只是排列方式不同。您的解决方案使项目更小

@SoWhy 您将不得不对不同宽度使用媒体查询。我的答案是更新检查现在。