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

Question

在将下一个子元素推到新行之前，他们在 CSS 中是否有一种简单的方法可以在同一行上固定最大数量的子项？

据我了解 flexbox，如果子项在其上方的行中足够可用 space，则它们只会被推到新行。但我正在寻找一个 CSS 规则或函数，让我说“我想在任何给定行上最多有 3 个子项，即使 space 是可用于第 4 个推入新行".

Answer 1

您可以将这些项目放在容器 div 中，该容器的宽度为 100%，最大宽度刚好足以容纳三个项目？

.parent {
    width:100%;
    max-width:350px;
}

然后将它放在所有项目周围。

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

Answer 2

不使用 display: flex 你可以使用 float: left 并清除每第 3 个 child 节点，如下所示：

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

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

我为你创建了一个fiddle：fiddle example

如果 parent 只能容纳两个 children，你可以使用这个简短的 jQuery 修复：

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

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

Fiddle 修复：fiddle example2

Answer 3

如果您将它与 bootstrap 一起使用，您应该为伪行添加此 css class

.row:before,
.row:after{
    width:0 !important;
 }

Answer 4

使用 flex-basis。

.child {
flex-basis: 33%;
}

百分比必须根据您的 box-sizing 模型和边距 and/or 填充的使用进行调整。

Answer 5

fiddle

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#container>div {
  margin: 15px;
  width: 150px;
  height: 150px;
}

/* negative paddings are treated as 0 so woohoo */
#container>div {
  /* up to 3 boxes in a row */
  padding: 0 calc((100% - 180px * 3) / 6);
}
#container>div {
  /* up to 4 boxes in a row */
  //padding: 0 calc((100% - 180px * 4) / 8);
}
#container>div {
  /* up to 5 boxes in a row */
  //padding: 0 calc((100% - 180px * 5) / 10);
}
/* 180px = width + horizontal margins */

Answer 6

或者您可以为此使用 CSS 网格：

你的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
    }
}

我相信有更有效的方法可以用网格来写这个。但这样就可以了。

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

CSS3 flexbox layout max 3 child items on one line

html

css

flexbox