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.

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

External Link for Using Flexbox rather than Floats

Other Items in css
Page Views

This page has been viewed 484 times.

Search Code
Search Code by entering your search text above.
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.

β€πŸ‘©β€πŸ’»πŸ•Ή

Random Quote
Be Yourself, Back Yourself
Kristie Bennett, Survivor