Question

我正在尝试在列之间添加空间（这些列位于带有“ display：flex;”的容器内），但是例如，如果我向其中两列添加边距，则我有2列宽度为50％的列。我想到在列之间“添加”一些空间以使它们不会粘在一起的唯一方法是创建另一个容器，只是添加边距，bg颜色，填充等。

基于12列的网格示例，一切正常发生：

    <!DOCTYPE html>
    <html>
    
    <head>
        <style>
            *,
            *::after,
            *::before {
                margin: 0;
                box-sizing: border-box;
            }
    
            .row {
                display: flex;
                flex-flow: row wrap;
            }
    
            /* based on 12 columns */
            .col-hd-3 {
                width: 25%;
            }
        </style>
    </head>
    
    <body>
        <div class="row">
            <div class="col-hd-3" style="background-color: red;">
                test
            </div>
            <div class="col-hd-3" style="background-color: green;">
                test
            </div>
            <div class="col-hd-3" style="background-color: yellow;">
                test
            </div>
            <div class="col-hd-3" style="background-color: grey;">
                test
            </div>
        </div>
    </body>
    
    </html>

现在，假设我向任何列添加边距：

    <! ---->
    <div class = "row">
             <div class = "col-hd-3" style = "background-color: red; margin: 12px;">
                 test
             </ div>
    <! ---->

最后一列将转到下一行。

所以唯一可以解决的事情是：

    <!---->
    <div class="row">
            <div class="col-hd-3">
                <div style="margin: 12px; padding: 5px; background-color: red;">
                    Test
                </div>
            </div>
    <!---->

我确定解决方案，还是做错了什么？

Answer 1

因此，在使用display: flex时，您需要在列上设置flex-grow: 1;和flex-basis: 0;或仅设置flex: 1;。阅读：https://www.w3schools.com/cssref/css3_pr_flex.asp

flex-grow定义了伸缩项在必要时增长的能力，而flex-basis定义了剩余空间分配之前元素的默认大小。

所以：

.col-hd-3 {
   max-width: 25%; /* COLUMN WILL NOT BE WIDER THAN 25% */
   margin: 12px;
   flex-basis: 0;
   flex-grow: 1;
}

或者您可以使用flex的缩写：

.col-hd-3 {
    max-width: 25%; /* COLUMN WILL NOT BE WIDER THAN 25% */
    margin: 12px;
    flex: 1;
}

*,
*::after,
*::before {
    margin: 0;
    box-sizing: border-box;
}

.row {
    display: flex;
    flex-flow: row wrap;
}

/* based on 12 columns */
.col-hd-3 {
    width: 25%;
    margin: 12px;
    flex-basis: 0;
    flex-grow: 1;
}

<div class="row">
      <div class="col-hd-3" style="background-color: red;">
          test
      </div>
      <div class="col-hd-3" style="background-color: green;">
          test
      </div>
      <div class="col-hd-3" style="background-color: yellow;">
          test
      </div>
      <div class="col-hd-3" style="background-color: grey;">
          test
      </div>
  </div>

是否可以在不增加项目尺寸的情况下增加其间距？

1 个答案: