CSS3 flexbox布局在一行上最多3个子项 [英] CSS3 flexbox layout max 3 child items on one line

问题描述

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

Is their an simple way in CSS to have a fixed maximum of child items on the same line, before you push the next child elements to a new line?

>

据我了解flexbox，如果子项在其上方的行上没有足够的可用空间，则仅将其推到新行。但是我正在寻找一个CSS规则或函数，让我说 我希望在任何给定行上最多包含3个子项，即使第4个位置有可用空间，也要将其推入新的行 。

As i understand flexbox, child items only get pushed to a new line if their isint enough available space on the line above it. But i am seeking a CSS rule or function that let me say "i want a maximum of 3 child items on any given line, and even if space is available for a 4'th one push it to a new line".

推荐答案

除了使用display：flex之外，您还可以使用float：left和clear每个第3个子节点，如下所示：

Instead of using display: flex you could use float: left and clear every 3rd child node like this:

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

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

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

I created a fiddle for you: fiddle example

在父母只能容纳两个孩子的情况下，您可以使用此简短的jQuery修复：

In the case that the parent can hold only two children, you could use this short jQuery fix:

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

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

修正为小提琴：提琴示例2

这篇关于CSS3 flexbox布局在一行上最多3个子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！