How do I clear a flexbox item?
I need to clear a cell layout item so that the first item is 100% wide, the second is 50% centered, and the third and fourth is 50% in one row.
The cleanup works fine on simple block elements, but I can't seem to find a way to do it with responsive 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>
source to share
Since clearing floats will not work the same for flex items, you can do this when you set box-sizing: border-box
for all items (padding addition will be included in the given width) and then for your 2: nd, you give it a little headroom that will force the rest on 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>
source to share
The key to a responsive layout is having the right width, flex-wrap: wrap
and box-sizing: border-box
.
The first element gets 100% width. This forces subsequent elements to leave the line.
The second, third and fourth elements get 50% width.
But each element also has horizontal padding. So item 2 will force elements three and four on lines.
For elements three and four, if we change their window model from box-sizing: content-box
(default) to border-box
, the addition will be included in the width calculation and both elements fit perfectly on the same 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>
source to share
I hope this can 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>
Which we usually use in flow layout.
.clear {
border: 0;
clear: both;
height: 0;
}
source to share