Html CSS flexbox 最大列数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43691890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS flexbox max column number?
提问by Martin
I'd like my css flexboxes to have a maximum of 3 columns when the user extends their browser window. With my current code, it flexes correctly inwards, with no minimum number of columns, but when extending outwards it will always automatically extend all the flexboxes out into a single line. http://jsfiddle.net/oq6prk1p/581/
当用户扩展浏览器窗口时，我希望我的 css flexboxes 最多有 3 列。使用我当前的代码，它可以正确地向内弯曲，没有最小列数，但是当向外扩展时，它总是会自动将所有 flexbox 扩展为一行。 http://jsfiddle.net/oq6prk1p/581/
In this case, I'm trying to only use the css file to achieve this, and am not editing the html file at all. So far this si the closest I've gotten:
在这种情况下，我试图仅使用 css 文件来实现这一点，而根本不编辑 html 文件。到目前为止，这是我最接近的：
html file:
html文件：
<main class="twit-container">
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Sitting in web dev... This class is so awesome!
</p>
<p class="twit-attribution">
<a href="#">CSMajor2017</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">BeaverBeliever</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">NewtonRulez</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Huh?
</p>
<p class="twit-attribution">
<a href="#">ConfusedTweeterer</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">Setup</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">Punchline</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">Hess</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">TheIRS</a>
</p>
</div>
</article>
</main>
<button type="button" id="create-twit-button"><i class="fa fa-bullhorn"></i></button>
css file:
css文件：
.twit-container {
display: flex;
flex-wrap: wrap;
padding: 5%;
margin:-10px 0 0 -10px;
position: relative;
}
.twit {
display: inline-block;
padding: 20px;
width: 150px;
height: 200px;
margin: 10px 0 0 1%;
background-color: #fff;
border: 1px solid #ccc;
flex-grow: 1;
outline: 2px solid blue;
}
}
not sure, why the css code is formating weird, but it is the same code as in the jsfiddle link
不确定，为什么 css 代码的格式很奇怪，但它与 jsfiddle 链接中的代码相同
回答by cg15255
You can set the flex-basisproperty of .twitwhich tells flexbox what base widthto give each .twitelement, before splitting up the remaining space to all elements.
您可以设置which的flex-basis属性.twit告诉 flexbox给每个元素的基本宽度.twit，然后将剩余空间拆分给所有元素。
try adding the following CSS to .twit(I used 30% not 33% to account for margins and padding, but you can play with this number.)
尝试将以下 CSS 添加到.twit（我使用 30% 而不是 33% 来说明边距和填充，但您可以使用这个数字。）
flex-basis: 30%;
回答by Karson Kalt
Your flexbox contains 8 child elements, so by default flexbox will fit as many elements on one row as possible, because your jsfiddle is only 700px wide, all remaining children are posted on a second row. It just so happens that the minimum width of the first row ended up to be three columns wide.
你的 flexbox 包含 8 个子元素，所以默认情况下 flexbox 会在一行中容纳尽可能多的元素，因为你的 jsfiddle 只有 700px 宽，所有剩余的子元素都张贴在第二行。碰巧的是，第一行的最小宽度最终变成了三列宽。
To get around this, I would separate each successive triplet flex items in their own flexbox, with the remaining two in a two column flexbox. Once the items are collapsed further, they will all stack into one column.
为了解决这个问题，我会将每个连续的三元组 flex 项目在它们自己的 flexbox 中分开，剩下的两个在一个两列的 flexbox 中。一旦项目进一步折叠，它们将全部堆叠成一列。
.twit-container {
display: flex;
flex-wrap: wrap;
padding: 5px;
margin: -10px 0 0 -10px;
position: relative;
}
.twit {
display: inline-block;
padding: 20px;
width: 150px;
height: 200px;
margin: 10px 0 0 1%;
background-color: #fff;
border: 1px solid #ccc;
flex-grow: 1;
outline: 2px solid blue;
}<main class="twit-container">
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Sitting in web dev... This class is so awesome!
</p>
<p class="twit-attribution">
<a href="#">CSMajor2017</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">BeaverBeliever</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">NewtonRulez</a>
</p>
</div>
</article>
</main>
<main class="twit-container">
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Huh?
</p>
<p class="twit-attribution">
<a href="#">ConfusedTweeterer</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">Setup</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">Punchline</a>
</p>
</div>
</article>
</main>
<main class="twit-container">
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">Hess</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
text
</p>
<p class="twit-attribution">
<a href="#">TheIRS</a>
</p>
</div>
</article>
</main>