如何将项目对齐到 flex 容器的开始和中心？

Question

我正在尝试水平对齐 flex 容器，同时保持它们的项目与开始对齐。 ~~我正在尝试 align-content: flex-start，同时使用 justify-content: center。~~

现在，如果最后一行的项目较少，它将以弹性容器为中心，而不是行的开头。

更新 1

这是预期的结果：

Answer 1

justify-content and align-content 属性只能应用于 flex 容器，但仅影响 flex 项目。因此，要使容器居中，您必须将 justify-content: center 应用于 .flex-container 的父级（在本例中为 body）。

或者，您可以简单地在 .flex-container 上使用 auto margins。

align-content 属性沿 flex 容器的横轴（在本例中为垂直平面）工作，不需要修复布局。

试试这个：

body {
  display: flex;
  justify-content: center;
}

.flex-container {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
}

modified plunker demo

或者这个：

.flex-container {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   margin: 0 auto;
}

modified plunker demo

更新（基于评论）

要解决容器右侧的额外空白问题，请参见此处：

Left aligned last row in centered grid of elements

Answer 2

我找到了 grid 的解决方案：

它有点复杂，但如果你像这样嵌套两个网格，它就可以工作：

.grid {
    overflow: hidden;

    --grid__col-width: 200px;
    --grid__column-gap: 20px;
    --grid__row-gap: 20px;
  
  max-width: 1200px;
  margin: 0 auto;
}

.grid__outer-grid {
    display: grid;
    margin: 0 calc(var(--grid__column-gap) * -1);
    
    column-gap: var(--grid__column-gap);
    row-gap: var(--grid__row-gap);
    
    --grid__column-gap-double: calc(var(--grid__column-gap) * 2);
    --grid__column-gap-half: calc(var(--grid__column-gap) / 2);
    --grid__row-gap-half: calc(var(--grid__row-gap) / 2);
    --grid__inner-grid: repeat(auto-fit, minmax(min(var(--grid__col-width), calc(100% - var(--grid__column-gap-double))), var(--grid__col-width)));
    grid-template-columns: minmax(0, 1fr) [grid-start] var(--grid__inner-grid) [grid-end] minmax(0, 1fr);
}

.grid__inner-grid {
    display: grid;
    
    grid-column-start: grid-start;
    grid-column-end: grid-end;
    
    column-gap: var(--grid__column-gap);
    row-gap: var(--grid__row-gap);
    
    grid-template-columns: var(--grid__inner-grid);
}

.box {
  background: red;
  height: 200px;
}

<div class="grid">
    <div class="grid__outer-grid">
        <div class="grid__inner-grid">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>    
    </div>
</div>

Demo

如何将项目对齐到 flex 容器的开始和中心？

How to align the items to the start and center the flex container?

css

flexbox

更新 1