flexbox 不以 justify-content 为中心，我猜 div 元素占用了太多空间，但为什么呢？答案

【问题标题】：flexbox not centering with justify-content, div elements taking up too much space i'm guessing, but why?flexbox 不以 justify-content 为中心，我猜 div 元素占用了太多空间，但为什么呢？
【发布时间】：2020-06-10 17:03:31
【问题描述】：

我一直试图让这些对象居中，当我使用<a href> 标签时，我可以看到我能够在远离图片的地方单击，但链接仍然会激活。我假设这意味着子容器占据了每个宽度的 50%，尽管容器只有一小部分是满的。为什么有空白区域阻止我对齐对象？

相关CSS：

.container {
  display: flex; 
  justify-content: center;
}
.containerimg {
  width: 30%;
  height: auto;
}
.next {
  display: flex;
  flex-direction: column;
}
.previous{
  display: flex;
  flex-direction: column;
}

编解码器：https://codepen.io/daniel-albano/pen/zYGKZEw?editors=1100

【问题讨论】：

标签： html css flexbox alignment

【解决方案1】：

您的问题有点含糊，但我假设您希望将 .previous 和 .next div 居中。

由于这两个都已经在使用 display: flex，您只需将 align-items: center 添加到 .previous 和 .next 类中，以使它们水平居中。如果您还希望内容（图像和文本）垂直居中，则需要添加justify-content: center。结果如下：

.next {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.previous {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

如果您想让这些 div 中的图像占用更多空间，则需要增加下面的 width 规则。由于您评论说您需要 100%，因此您需要将其更改为：

.containerimg {
  width: 100%;
  height: auto;
}

【讨论】：

【解决方案2】：

您应该能够通过在 .next 和 .previous 类中添加“align-items: center”来解决此问题。这样做的原因是，当您将 flex-direction 切换到 column 时，也会切换 align-items 和 justify-content 的工作方式，本质上是颠倒它们。

    .next {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .previous{
      display: flex;
      flex-direction: column;
      align-items: center;
    }

【讨论】：

【解决方案3】：

.container {
   display: flex; 
   justify-content: center;
   width:100vw;
}
.previous, .next{
   width:30%;
   display:flex;
   flex-direction:column;
   align-items:center;  
}

img{
   width:100%;
}

<div class="container">
  <div class="previous">
      <img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
      <p>caption 1</p>
      
  </div>
  <div class="next"> 
    <img class="containerimg"  src="https://i.imgur.com/s11MTLc.png"> 
    <p>caption 2</p>
     
  </div>
</div>

【讨论】：

【解决方案4】：

我发现了问题，我需要我的图像包含 100% 的空间，并且我需要为子容器分配一个宽度元素。

【讨论】：