FlexboxONE GIANT LEAP FOR WEB LAYOUT

STEPHEN HAYGENERATECONF 2013

image: NASA

~8 years

image: NASA

https://en.wikipedia.org/wiki/File:First_Web_Server.jpg

~1 year

CASCADING STYLE SHEETS, LEVEL 1

~2 years

17 yearsCSS has been around for

aka “Flexbox”

and only now do we have “real” layoutin the form of Flexible Box Layout Module

“Layout is hard.”

image: NASA

“Layout solutions are an interesting area in CSS to me.”

– Tab Atkins

Two major types of “real” web layout

Before you get all excited…

http://www.xanthir.com/blog/b4580

Flexboxes aren’t ideal for page layout

A quick introduction to Flexbox

Terminology

Axes & Size

Flex

Alignment

Order

Leave your layout baggageat the door.

Terminology

Flex containers

Flex items

Main axis / size / dimension

Cross axis / size / dimension

Start / end

Hi, Bob.

#bob { display: flex; }

(Bob is a flex container)

Flex itemsItems in a flex container are, by default, flex items(even anonymous block boxes)

I’m a flex item! Me too! Me three!

Main axis+ main size, main dimension

Cross axis+ cross size, cross dimension

Start & Enddepends on direction

CROSS START

CROSS END

MAIN ENDCENTERMAIN START

Start & Enddepends on direction

MAIN START

MAIN END

CROSS ENDCENTERCROSS START

Direction

#bob { flex-flow: row wrap; }

#bob { flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: no-wrap | wrap | wrap-reverse;}

SHORTHAND:

Flex

.foo { flex: 0 1 100px; }

.flex-item { flex: flex-grow flex-shrink flex-basis;}

EXAMPLE:

Flex

.foo { flex: initial; }

.foo { flex: 0 1 auto;}

IS EQUIVALENT TO:

common values (1)

width: 150px

width: 150px

width: 150px

Flex

.foo { flex: auto; }

.foo { flex: 1 1 auto;}

IS EQUIVALENT TO:

common values (2)

width: 150px

width: 150px

width: 150px

Flex

.foo { flex: none; }

.foo { flex: 0 0 auto;}

IS EQUIVALENT TO:

common values (3)

width: 150px

width: 150px

width: 150px

Flex

.foo { flex: [n]; }

.foo { flex: [n] 1 0%;}

IS EQUIVALENT TO:

common values (4)

flex: 1 flex: 1 flex: 1

Flex flex: [n]

flex: 1 flex: 1 flex: 2

Flex flex: [n]

flex: 1 flex: 5 flex: 2

Alignmentauto-margins

margin-top: auto

no margin no margin

.foo { margin-top: auto; }

Alignmentalong the main axis: justify-content(align-content for multiple lines along cross axis)

JUSTIFY-CONTENT

#bob { justify-content: flex-start | flex-end | center | space-between | space-around }

in the case of flex-direction: row

http://dev.w3.org/csswg/css-flexbox/

Alignmentalong the cross axis: align-items(align-self can be applied to the flex items themselves)

ALIGN-ITEMS

#bob { align-items: flex-start | flex-end | center | baseline | stretch }

in the case of flex-direction: row

Orderchanges the visual order vs. the source order

3 1 2

.item:nth-child(3) { order: -1; }

.foo { order: [n]; }

Common use casesTrue centering (both axes)

Unknown menu items

Display order

Wrapping (menu items, boxes)

Tab groups

Form layout

A small example

Structured content

Basic styles

display:flex on container

flex-direction:column

margin-auto on icons and form

flex:1 on input field

order for avatar display

done.

Browser compatibilitysource: http://caniuse.com/#search=flexbox

have funkeep learning

THANK YOU! @stephenhay