I'm trying to achieve a simple thing that we have in standard CSS.
Let's say that I have a grid system with 3 columns and box-sizing: border-box.
That means that I will fit 3 boxes and with a margin that will shrink the size to fit max 3 boxes.
But when I try to do that with FLEXBOX, it's a pain!!
So if I have div's with flex: 1 1 33.33%; margin: 10px; I was expecting to have 3 boxes per row... but if I use flex-wrap: wrap, that will not shrink to fit 3 boxes .
Here is a example.. the idea is that the second row would have 3 boxes in a row and fourth box would be in the last row.
Thanks
https://jsfiddle.net/mariohmol/pbkzj984/14/
.horizontal-layout {
display: flex;
flex-direction: row;
width: 400px;
}
header>span {
/* flex: 1 1 100%; */
/* flex: 1 0 100%; */
flex: 1 1 33.33%;
margin: 10px;
}
header>.button {
background-color: grey;
}
header>.app-name {
background-color: orange;
}
header#with-border-padding {
flex-wrap: wrap;
}
header#with-border-padding>span {
flex: 1 1 33.33%;
box-sizing: border-box;
/* this is not useful at all */
}
header#with-border-padding>.button {
border: 1px solid black;
padding-left: 5px;
}NO flex-wrap: wrap, so it not respects the flex 33% <br/>
<header class="horizontal-layout">
<span class="button">A</span>
<span class="app-name">B</span>
<span class="button">C</span>
<span class="button">D</span>
</header>
<br/><br/> WITH flex-wrap: wrap : I expect to have 3 boxes in first row and D box in a down<br/>
<header id="with-border-padding" class="horizontal-layout">
<span class="button">A</span>
<span class="app-name">B</span>
<span class="button">C</span>
<span class="button">D</span>
</header>