this content was originally posted here.

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
database file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/db.db
comments_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/comments.db ($db_comments)
views_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/views.db
$dbfood_file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/food.db
db_linx: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/linx/db/db.db
Classes Loaded:
class/answers.class.php
class/code.class.php
class/comments.class.php
class/content.class.php
class/core.class.php
class/crud.class.php
class/crumbs.class.php
class/featured.class.php
class/food.class.php
class/functions.class.php
class/images.class.php
class/import.class.php
class/links.class.php
class/questions.class.php
class/template.class.php
class/tv.class.php
class/user.class.php
class/utilities.class.php
class/views.class.php
class/widget.class.php
Class Extend Loaded: class/extends/expenses.extend.php
Class Extend Loaded: class/extends/gary_cummins_timeline.extend.php
Class Extend Loaded: class/extends/moo.extend.php
Class Extend Loaded: class/extends/osrs_item_data.extend.php
Class Extend Loaded: class/extends/osrs_slayer.extend.php
Class Extend Loaded: class/extends/osrs_slayer_monsters.extend.php
Class Extend Loaded: class/extends/searches.extend.php
Core Database Connected: expenses.db
expenses add_to_menu:
Class Extend Auto Initialized as: expenses
Core Database Connected: gary_cummins_timeline.db
gary_cummins_timeline add_to_menu:
Class Extend Auto Initialized as: gary_cummins_timeline
Core Database Connected: moo.db
moo add_to_menu:
Class Extend Auto Initialized as: moo
Core Database Connected: osrs_item_data.db
osrs_item_data add_to_menu:
Class Extend Auto Initialized as: osrs_item_data
Core Database Connected: osrs_slayer.db
osrs_slayer add_to_menu:
Class Extend Auto Initialized as: osrs_slayer
Core Database Connected: osrs_slayer_monsters.db
osrs_slayer_monsters add_to_menu:
Class Extend Auto Initialized as: osrs_slayer_monsters
Core Database Connected: searches.db
searches add_to_menu:
Class Extend Auto Initialized as: searches
$user_logged_in:
user access level:
pages:
$p1:view
$p2:code
$p3:4obpr
$p4:using-flexbox-rather-than-floats
$p5:
$p6:
$p:/view/code/4obpr/using-flexbox-rather-than-floats/
Using Template: view-code.html