Question

我正在创建一个拥有三张卡片的网站并创建它们我使用的是弹性盒子。我正在使用justify-content: space-between，当三列都在同一行时，它们可以很好地工作，因为它们的边距与容器完美无缺，并且它们之间的空间很大。

但是，当列换行时，现在位于新行上的列与第一行的左边距相同，这与space-between一致，但在我的场景中，space-around＆＃39;包装行为看起来会好得多，因为我有奇数卡。

我有没有办法让space-between的外边距与space-around的包裹行为保持一致？

这是一个代码集，它提供了我现在拥有的快速示例。

＆＃13;

  .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;
}

＆＃13;

<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>

＆＃13;

Answer 1

尝试添加保证金：0自动，你明白了。

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

我认为这个帮助了你。 :) 即使你可以使用justify-content:center;来解决这个问题，但保证金将是好的。

利用空间环绕行为

1 个答案: