How to clear flexbox item? - html

Question

I need to clear flex box layout item so that first item is 100% width, the second is 50% centered on its own line, and 3rd and 4th are 50% width on the same line.
The clear works normal on simple block items but I can't find a way to do this with flex layout.
https://jsfiddle.net/tzx8qyjt/
.container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.item {
background: tomato;
padding: 5px;
width: 100%;
height: 150px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
.container.block {
display: block;
}
.container.block .item {
float: left;
box-sizing: border-box;
}
.half {
width: 50%;
}
.container .item.centered {
float: none;
clear: both;
margin-left: auto;
margin-right: auto;
}
<ul class="container">
<li class="item">1</li>
<li class="item half centered">2 Clear after me</li>
<li class="item half">3</li>
<li class="item half">4</li>
</ul>
<br />
<br />
<br />
<br />
<br />
<ul class="container block">
<li class="item">1</li>
<li class="item half centered">2 Clear after me</li>
<li class="item half">3</li>
<li class="item half">4</li>
</ul>

Answer 1

Since clearing floats won't work the same for flex items, you could do like this, where you set box-sizing: border-box on all items (makes padding be included in the set width) and then for your 2:nd, you give it a small margin, which will force the rest to a new line
.container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.item {
background: tomato;
padding: 5px;
width: 100%;
height: 150px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
box-sizing: border-box;
}
.half {
width: 50%;
}
.container .item.centered {
margin: 0 10px;
}
<ul class="container">
<li class="item">1</li>
<li class="item half centered">2 Clear after me</li>
<li class="item half">3</li>
<li class="item half">4</li>
</ul>

Answer 2

I hope that it may work for you. I am using this code.
.clear {
width: 100%;
border: none;
margin: 0;
padding: 0;
}
<ul class="container">
<li class="item">1</li>
<li class="item half">2 Clear after me</li>
<li class='clear'><li>
<li class="item half">3</li>
<li class="item half">4</li>
</ul>
What we generally use in flow layout.
.clear {
border: 0;
clear: both;
height: 0;
}

Answer 3

The key to the flex layout is using proper widths, flex-wrap: wrap and box-sizing: border-box.
The first item gets 100% width. That forces subsequent items off the line.
The second, third and fourth items each get 50% width.
But each item also has horizontal padding. So item 2 will force items three and four off the line.
For items three and four, if we adjust their box model from box-sizing: content-box (the default) to border-box, the padding gets included in the width calculation and both items fit perfectly on one line.
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
}
li:nth-child(1) { flex: 0 0 100%;} /* flex-grow, flex-shrink, flex-basis */
li:nth-child(2) { flex: 0 0 50%; }
li:nth-child(3) { flex: 0 0 50%; box-sizing: border-box; }
li:nth-child(4) { flex: 0 0 50%; box-sizing: border-box; }
.item {
background: tomato;
padding: 5px;
height: 150px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<ul class="container">
<li class="item">1</li>
<li class="item half centered">2 Clear after me</li>
<li class="item half">3</li>
<li class="item half">4</li>
</ul>