ABOUTFLEXBOXYou can't float anymore

MILANO FRONT END MEETUP - 15/12/2015

About me

I'm Davide Di Pumpo and I'm a front-end developer. I love graphic novel, competitive videogames and cats.

You can find me on the internet with the nicknameMakhBeth - - Twitter GitHub LinkedIn

Let's startMEOW

The problem?How can I make this f*****g layout?

The holy grail layout

The Holy Grail refers to a web page layout which has multiple, equal heightcolumns that are defined with style sheets. It is commonly desired andimplemented, although the ways in which it can be implemented with currenttechnologies all have drawbacks. Because of this, finding an optimalimplementation has been likened to searching for the elusive Holy Grail.

Source - Wikipedia

Once upon a time......we had:

TablesInline blockFloat

TablesSeriously?

Semantic? NOPE

Responsive? NOPE

Vertical align? YUP

Order? NOPE *

How aboutdisplay: table;?

Semantic? YUP *

Responsive? YUP *

Vertical align? YUP *

Order? NOPE *

Come on! What's the problem guy?You must use element to simulate rowStyling the element is a pain.Try to add a padding to a row

or a max-width to a cell

The order is still a view issue

Try it yourself

Inline BlockSemantic? YUP

Responsive? YUP *

Vertical align? ALMOST

Order? NOPE *

What's the matter?Vertical stretch an element is impossiblebut...BUT...

White Space

FloatSemantic? YUP

Responsive? YUP *

Vertical align? AHAHAHAHAH NOPE

Order? NOPE *

Why not?Clearfix Block Formatting Context

Impossible to manage vertical alignment

The holy grail

RECAPabout the old good times

Tables have issuesInline blocks have issuesFloats have issuesIt's impossible (without hacks) to manage ordermore important...

They are all hacks

Why Flexbox?Semantic? YUP

Responsive? YUP

Vertical align? YUP

Order? F*CK YEAH

The holy grailSEE IT IN ACTION

It's all there?Nope

But first some important knowledge

Differences between container and item

display: flex;

Flex item Flex item Flex item

Direction

------ direction row ------>

Flex item Flex item Flex item

Column

Flex item

Flex item

Flex item

Flex Basis, all is relative

flex-basis: 50%; flex-basis: 50%;

flex-basis: 50%;

flex-basis: 50%;

Let's see all the rules!

Responsive without media query!You can use flex basis to manage a min-dimension

EXAMPLE

Mix it with the old school!You can starting use flex via beautiful enhancement!

EXAMPLE

But you can use mediaquery for beautiful thing

With order property!

EXAMPLE

RECAPFlexibleResponsiveReady for today

What's now?

Can I use?

How about old crappy explorer?Don't worry:

A polyfill appears!

Is flexbox asilver bullet?

NoSorry, I've lied to you

A little

Flexbox is designed basically for:content driven layoutcomponentnot for grid Take a look at css grid

But Grid CSS is not supported fornow

Any idea?There are a few:

And my favourite one...

FlexboxgridBootstrap - alpha 4

Super GiGi

RECAPCan I use? YesIt's not for everything, but is the best we have nowThere are a lot of tool to help us.

Links for you:CSS Tricks guide to flexboxLearn flexbox playing with flexbox froggyAll the known flexbox bugsAutoprefixer

Questions?