html - Flex box space-between margins with space-around wrapping 行为

Question

我正在制作一个包含三张卡片的网站，并使用 flex box 创建它们。我正在使用 justify-content: space-between 当三列都在同一行时，它可以完美地工作，因为它们的边距与容器完美匹配，并且它们之间的空间很大。

但是，当列换行时，现在位于新行上的列与第一列的左边距相同，这是 space-between 所期望的，但在我的场景中，space-around 的环绕行为看起来会好得多，因为我有奇数张卡片。

有没有办法让 space-between 的外边距与 space-around 的环绕行为对齐？

这是一个代码笔，它给出了我现在所拥有的内容的快速示例。

https://codepen.io/anon/pen/xdrpEo

  .flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: spacing-between;
}

    .file-links-flex-container {
      max-width: 400px;
      flex-grow: 1;
      background-color: red;
      
}
      
              .container-content {
          justify-content: flex-start;
                        padding: 0 30px;
        max-height: 600px;
}

<div class="flex-row space-around">
        <div class="file-links-flex-container col">
          <div class="container-header">
            <h5>A</h5>
          </div>
          <div class="container-content">
            <p>I AM TEST CONTENT!</P>
          </div>
        </div>
          <div class="file-links-flex-container col">
          <div class="container-header">
            <h5>B</h5>
          </div>
          <div class="container-content">
            <p>I AM TEST CONTENT!</P>
          </div>
        </div>
        <div class="file-links-flex-container col">
          <div class="container-header">
            <h5>C</h5>
          </div>
          <div class="container-content">
            <p>I AM TEST CONTENT!</P>
          </div>
        </div>
          </div>

Answer 1

尝试添加 margin: 0 auto，你明白了。

.file-links-flex-container{
     margin: 0 auto;
}

我认为这篇文章对您有所帮助。 :)即使您可以使用 justify-content:center; 来解决这个问题，但 margin 将是一个不错的选择。