Question

我的CSS就像这样。最后一行出现了一个不必要的空间。如何使柔性盒均匀。 products1是最外层的div，catlist1是中间的div，d1是最里面的div： -

 .products1{
        position:absolute;
        top:800px;
        padding:50px;
        background: #f2f2f2;
        display:flex;
        margin-left: 15px;
        width: 90%;
    }

    .catlist1{
        flex-wrap: wrap;
        width: 100%;    
        padding:0px;
        display:flex;
    }

    .d1{
        display: block;
        background:white;
        margin-left: auto;
        margin-right: auto;
        background-size: cover; 
        margin: 10px auto;
        width:100px;
        height:25px;
        border:0 solid #dee0e2;
        display: inline;
        padding:50px;
        text-align: center;
        box-shadow: 1px 5px 5px 0 rgba(0,0,0,.3);
    }

我得到的结果如下： - [！[本] [1] [1]

HTML： -

<div class="products1">
   <div class="catlist1">
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
   </div>
</div>

Answer 1

从自动模式margin: 10px auto;到margin: 3px 3px;

的距离

但如果您想要更高精度，请使用@media screen and

你会的

Answer 2

原因是auto margin语句d1。它使应用的元素居中，从而使最后一行中的元素均匀分布。

如果您想让auto 和让最后一行显示为其他行，那么我认为没有JavaScript或切换到display: grid和不同宽度的媒体查询。如果您只想填写最后一行并为边距找到不同的解决方案，请将另一个带有CSS规则div的{{1}}添加到catlist flex-grow: 1的末尾。

Answer 3

更改d1类的Margin属性，如下所示：

.d1 {
        display: block;
        background:white;
        margin-left: auto;
        margin-right: auto;
        background-size: cover; 
        **margin: 10px;**
        width:100px;
        height:25px;
        border:0 solid #dee0e2;
        display: inline;
        padding:50px;
        text-align: center;
        box-shadow: 1px 5px 5px 0 rgba(0,0,0,.3);
}

由于margin:10px auto;导致每个flex-item的左右边距为自动，导致最后一行的左/右边距分布不均匀，其中项目数量较少。

如何使flexbox均匀？

3 个答案: