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.

View CodePad Test Code for Using Flexbox rather than Floats

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;
}

Demo

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.

x
x x
x
x x
x

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.

x
x x
x
x x
x
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹