Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)

FlexboxONE GIANT LEAP FOR WEB LAYOUT

STEPHEN HAYBDCONF, NASHVILLE 2013

The design-in-the-browser hamburger

DESIGNER

The design-in-the-browser hamburger

DESIGNER

The design-in-the-browser hamburger

CODE

(the stuff that’s really happening)

DESIGNER

The design-in-the-browser hamburger

MAGIC

CODE

(the stuff that’s really happening)

DESIGNER

The design-in-the-browser hamburger

MAGIC

CODE

(the stuff that’s really happening)

DESIGNER

The design-in-the-browser hamburger

MAGIC

CODE

(the stuff that’s really happening)

DESIGNER

The design-in-the-browser hamburger

MAGIC

CODE

Designers aren’t stupid.

Designers aren’t stupid.Many designers are willing to explore web tech as a design tool, but we have to make the right things easier.

Flexbox is a step in the right direction.

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 we finally 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

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

We’re talking about this version

Two major types of “real” web layout

Two major types of “real” web layout

Available spaceFlexbox helps us deal with

even when we don’t know what that will be

alignment

Flexbox helps us with

both

hor

izon

tally

and

ver

tical

ly

ordreFlexbox helps us with

display

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

CODEhttp://www.flickr.com/photos/evdaimon/337754011/

display: flex | inline-flex

Hi, Bob.

#bob { display: flex; }

(Bob is a flex container)

display: flex | inline-flex

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

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

Direction

#bob { flex-flow: row wrap; }

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

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

SHORTHAND:

Main axis+ main size, main dimension

in the case of flex-direction: row

Cross axis+ cross size, cross dimension

in the case of flex-direction: row

Start & Enddepends on direction

CROSS START

CROSS END

MAIN ENDCENTERMAIN START

in the case of flex-direction: row

Start & Enddepends on direction

MAIN START

MAIN END

CROSS ENDCENTERCROSS START

in the case of flex-direction: column

Flex

.foo { flex: 0 1 150px; }

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

EXAMPLE:

Flex

.foo { flex: 0 1 150px; }

.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/

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

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

ALIGN-ITEMS

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

in the case of flex-direction: row

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

Orderchanges the visual order vs. the source order

3 1 2

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

.foo { order: [n]; }

Common use cases

True centering (both axes)

Multi-box layouts (products, teasers)

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://beta.caniuse.com/#search=flexbox

Don’t sweat the prefixeshttp://leaverou.github.io/prefixfree/

meh.

source: http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/

(but go ahead if you really want to)

http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/

Syntax variations

Before you get all excited…

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

Flexboxes aren’t ideal for page layout

Flexbox is ideal for components

http://pattern-lab.info/

Flexbox is ideal for components

http://pattern-lab.info/

The hardest thing to learn about new toolsis not how to use them, but when to use them.

have funkeep learning

THANK YOU!

@stephenhay