CSS flexbox max column number?
I want my css flexboxes to have a maximum of 3 columns when the user expands their browser window. With my current code, it folds inward correctly, with no minimum number of columns, but when expanded outward, it will always automatically spread all flexboxes to one row. http://jsfiddle.net/oq6prk1p/581/
In this case, I am trying to only use the css file for this, and am not editing the html file at all. So far, this is the closest I've gotten:
html file:
<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:
.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 generating weird but this is the same code as in the jsfiddle link
source to share
You can set a property flex-basis
.twit
that tells flexbox what base width to give each item .twit
, before splitting the remaining space across all items.
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.)
flex-basis: 30%;
source to share
Your flexbox contains 8 children, so by default flexbox will fit as many items on one line as possible, since your jsfiddle is only 700px wide and the rest of the remaining children are placed on the second line. It just so happens that the minimum width of the first row ends up being three columns wide.
To get around this, I would split each next triplet flex item in its own flexbox, and the other two in two flexbox columns. After the items are collapsed further, they all collapse into one column.
.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>
source to share