Posted in css
10185
4:27 am, January 16, 2019
 

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

View Statistics
This Week
281
This Month
1135
This Year
2707

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in css
flex to align pagination in list format make an image or element grayscale switch on mouse over rotate an element when its hover rotate an element when its selected Left Fixed nav with right fluid content css html vertical center css cursor types testing CSS Object Fit for Image fill rather than using background image on a div flip card animation 3d front and back css html six box grid css html custom no gap four box grid css html custom Kinda Crappy 3D button code 4 box custom grid css layout stack on mobile 1024 lower use an image in your list items ol ul li css grid container with 4 auto columns select something with custom data attribute css rainbow text background clip with linear gradient content-visibility and contain-intrinsic-size for page load rendering speed increase set a css grid to auto to make it stack on mobile truncate text with line clamp allow a certain number of lines using the :user-valid CSS pseudo-class add a button to an existing link using :after css bouncing loader animation in css center a box in the middle of the screen highlight a button with an animation css add an outline to everything! hide the first h3 tag on the page with css center align vertical 2 items in a container flex simple javascript no library accordion button zoom effect with expanding background scroll left animation using css counter-increment to add numbering to elements hidden scroll anchor for custom scroll position ken burns slow image zoom using a radial gradient for background overlay change selected color on input elements css animated duck on footer using filter grayscale to make an image dark bootstrap dark mode twitter icon font awesome how to bundle css files together using windows or mac button with separated chevron vertically align text within a fixed height div using flex how to view a web page in its printer format white space break word css roboto and poppins fonts include quick code CSS Drawing - Beach Scene 404 Error Page Codepen right align something in its element hide the third row in a table with css
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Random CSS Property

font-optical-sizing

The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.
font-optical-sizing css reference