CSS3 flexbox布局一行最多3个子项

Question

在将下一个子元素推送到新行之前,CSS中的一种简单方法是在同一行上具有固定的最大子项吗？

据我了解flexbox,如果子项目在其上方的线上有足够的可用空间,则只会将其推送到新行.但是我正在寻找一个CSS规则或函数,让我说" 我想在任何给定的行上最多有3个子项,即使空间可用于第4个,也可以将它推到新行 ".

Answer 1

使用flex-basis.

.child {
flex-basis: 33%;
}

必须根据您的盒子大小模型以及边距和/或填充的使用来调整百分比.

Answer 2

或者你可以使用 CSS Grid 来实现：

您的 HTML：

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

你的CSS：

.parent {
    display: grid; // activate grid
    grid-template-columns: repeat(4, 1fr); //make 4 cols with size 1fr
    grid-gap: 20px; //gap between the rows
}
.child { //thats written with less. Just unnest for vanilla css
    &:nth-child(3n+1) {
      grid-column: 1;
    }
    &:nth-child(3n+2) {
      grid-column: 2;
    }
    &:nth-child(3n+3) {
      grid-column: 3;
    }
    &:nth-child(3n+4) {
      grid-column: 1; //put the fourth item in a new row
    }
}

我确信有更有效的方法可以用网格来编写它。但这可以完成工作。

Answer 3

您可以使用 float: left 并清除每个第三个子节点，而不是使用 display: flex ，如下所示：

.child {
    background: #000;
    height: 300px;
    float: left;
    margin:15px 0 0 15px;
    width:150px;

}
.child:nth-child(3n+1) {
    clear: left;   
}

我为你创建了一个小提琴：小提琴示例

如果父级只能容纳两个子级，您可以使用这个简短的 jQuery 修复：

var child = $('.child'),
    parent = $('.child').parent();

if( child.width() > (parent.width()/3) ) {
     child.css('clear', 'none');   
}

摆弄修复：小提琴示例2