Put space between large items of CSS Flexbox row-wrap [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I want to put space between large items of a Flexbox row-wrap container.
Before I ask my question, please take a look at the last Codepen example at the end of the article in the link below ("Let's try something even better by playing with flex items flexibility!"):
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
My question;
When the window is the widest (> 800px), how can I add space between Yellow, Blue and Red (the two asides and the main)? At the moment they are flexed on a row but staked against each other.
My understanding:
There is no space between items because Blue (the main) would take 100% of the width of it were outside the flex, because of all the text inside it.
But if Yellow, Blue and Red were no more than, let's say, 20% wide each, then we would have space between them (with total space being 100% - 3x20% = 40%).
My question again:
Notwithstanding the fact that I have one or several items whose individual width outside of a Flexbox would be 100% because of a lot of text inside them, I would like to flex them on a row with space between them.
Is that easily possible?
Thank you

Answer 1

Fairly simply, just use margins. You can either put margin: 0 100px on main (my prefered method), or add a right margin to the first aside and a left margin to the second. Stealing Chris's (compiled) code, it would look like this (you may have to open the snippet in full screen):
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: tomato;
}
.footer {
background: lightgreen;
}
.main {
text-align: left;
background: deepskyblue;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
#media all and (min-width: 600px) {
.aside {
flex: 1 auto;
}
}
#media all and (min-width: 800px) {
.main {
flex: 3 0px;
margin: 0 100px;
}
.aside-1 {
order: 1;
}
.main {
order: 2;
}
.aside-2 {
order: 3;
}
.footer {
order: 4;
}
}
body {
padding: 2em;
}
<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>
No messing around with width (or flex-basis) needed.