Flex box space-between margins with space-around wrapping 行为答案

【问题标题】：Flex box space-between margins with space-around wrapping behaviorFlex box space-between margins with space-around wrapping 行为
【发布时间】：2018-06-17 03:55:08
【问题描述】：

我正在制作一个包含三张卡片的网站，并使用弹性框来创建它们。我正在使用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>

【问题讨论】：

您是否也错过了代码中的“spacing-between”拼写空格或仅在代码笔上？
尝试将margin: 0 auto; 添加到file-links-flex-container 类。你明白了。
您可以使用媒体查询在卡片开始换行时交换 justify-content 的值。
@AshwinMothilal 很好地抓住了错字，饥饿之星有没有一种动态的方式可以在发生柔性包装时应用它？我不确定断点是否能在所有屏幕上正常工作
使用容器上的space-between 和last-of-type 元素上的margin: 0 auto 断点解决了这个问题。谢谢大家！

标签： html css flexbox

【解决方案1】：

尝试添加边距：0 auto，你明白了。

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

我认为这个对你有所帮助。 :) 即使你可以使用justify-content:center; 来解决这个问题，但margin 会是好的。

【讨论】：