Using Flexbox rather than Floats
So i was still using float left for a bunch of elements i was working on the other day, sometimes it's hard to drop old techniques.
What are the actual benefits of using flexbox rather than float left.
https://caniuse.com/#search=flex
Flexbox is supported by all browsers these days, unless you are still using ie9 and below, are there any IE users anymore?
I did some tests with some rounded ball looking divs here: https://kruxor.com/codepad/?p=/view/notes/KYtCN/using-flexbox-rather-than-float/
It makes things a lot easier using flexbox:
- don't worry about padding items if you need them to be centered in a div
- you can center align items so easily its awesome.
In conclusion, flex box is a lot better than floats. And it's pretty easy to get used to. I will try and use it from now onwards.
HTML
<h2>Here is the float version</h2>
<p>This is fine unless you need to center the elements inside this container. To get the x in the middle of these boxes, i used to add padding to the top each time, now with flex you can just add align-items:center and justify-content: center; as seen in the flex example below. </p>
<div class='float-wrap'>
<div class='round-ball float-element'>x</div>
<div class='round-ball float-element'>x x</div>
<div class='round-ball float-element'>x</div>
<div class='round-ball float-element'>x x</div>
<div class='round-ball float-element'>x</div>
</div>
<h2>Flex version</h2>
<p>This is much better as you can set the way they align much easier. Also you can use the justify-content: center; to make sure the content is centered, and if you want vertical align center you can use: align-items: center; this seems to have issues if there is more than one element in there. </p>
<div class='flex-wrap'>
<div class='round-ball flex-element'>x</div>
<div class='round-ball flex-element'>x x</div>
<div class='round-ball flex-element'>x</div>
<div class='round-ball flex-element'>x x</div>
<div class='round-ball flex-element'>x</div>
</div>
CSS
.float-wrap {
overflow:hidden;
}
.round-ball {
width:100px;
height:100px;
background:#717171 linear-gradient(#717171,#444444);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
border-radius:100px;
margin:0 10px 10px 0;
text-align:center;
color:#FFF;
}
.float-element {
float:left;
vertical-align:middle;
padding-top:34px;
}
.flex-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flex-element {
display: flex;
align-items: center;
justify-content: center;
}
Here is the float version
This is fine unless you need to center the elements inside this container. To get the x in the middle of these boxes, i used to add padding to the top each time, now with flex you can just add align-items:center and justify-content: center; as seen in the flex example below.
Flex version
This is much better as you can set the way they align much easier. Also you can use the justify-content: center; to make sure the content is centered, and if you want vertical align center you can use: align-items: center; this seems to have issues if there is more than one element in there.
External Link for Using Flexbox rather than Floats