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/
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 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;}