css - 将包裹的弹性项目保持在左侧，而其他项目居中

Question

我正在尝试使用margin: auto. 当 wrap 发生时，被包裹的项目也会在它自己的容器中居中：

有没有办法将包裹的物品保持在左侧，而其他所有物品都居中？

.parent {
  display: flex;
  flex-wrap: wrap;
  height: 100px;
}

.children {
  flex: 1;
  border: 1px solid black;
  max-width: 300px;
  min-width: 300px;
  margin: auto;
  height: 100px;
  margin-top: 1rem;
}

<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

标签： cssflexbox

Answer 1

您是说您希望项目居中，但是当只有一个项目可以包装时，您希望它左对齐。

问题是 flex 容器中实际上没有左对齐。一切都居中，基于行中的可用空间。所以最后一行中的单个项目对上面发生的事情没有任何概念，也没有什么可对齐的。

如果您左对齐最后一项（在更宽的屏幕上），会发生以下情况：

.parent {
  display: flex;
  flex-wrap: wrap;
}

.children {
  border: 1px solid black;
  max-width: 300px;
  min-width: 300px;
  margin: auto;
  height: 100px;
  margin-top: 1rem;
}

.children:last-child {
  margin-left: 0;
}

<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

你需要的是一个嵌套的网格结构。

用于建立居中的顶级网格。

用于包装的嵌套网格。

在下面的演示中，您会发现一个三列网格。左右列是空的（间隔）项，使用 CSS 伪元素创建，并设置为相等的宽度。这使中间项目居中。

中间项也是一个网格容器。使用repeat()和auto-fill函数，项目可以换行，单个项目左对齐。

body {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

body::before,
body::after {
  content: ''; /* in grid (and flex) layouts, pseudo-elements on the container
                  are treated as items */
}

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  grid-auto-rows: 100px;
  grid-gap: 10px;
  justify-content: center; /* centers the columns (not the items, like in flex) */
}

.children {
  border: 1px solid black;
}

<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

jsFiddle 演示