Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

48
Flexbox ONE GIANT LEAP FOR WEB LAYOUT STEPHEN HAY GENERATECONF 2013

description

My talk about Flexbox for Generate Conference 2013

Transcript of Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Page 1: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

FlexboxONE GIANT LEAP FOR WEB LAYOUT

STEPHEN HAYGENERATECONF 2013

Page 5: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

CASCADING STYLE SHEETS, LEVEL 1

~2 years

Page 6: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

17 yearsCSS has been around for

Page 7: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

aka “Flexbox”

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

Page 8: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

“Layout is hard.”

Page 10: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

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

– Tab Atkins

Page 11: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Two major types of “real” web layout

Page 12: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Before you get all excited…

Page 13: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

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

Flexboxes aren’t ideal for page layout

Page 14: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

A quick introduction to Flexbox

Terminology

Axes & Size

Flex

Alignment

Order

Page 15: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Leave your layout baggageat the door.

Page 16: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Terminology

Flex containers

Flex items

Main axis / size / dimension

Cross axis / size / dimension

Start / end

Page 17: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Hi, Bob.

#bob { display: flex; }

(Bob is a flex container)

Page 18: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

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

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

Page 19: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Main axis+ main size, main dimension

Page 20: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Cross axis+ cross size, cross dimension

Page 21: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Start & Enddepends on direction

CROSS START

CROSS END

MAIN ENDCENTERMAIN START

Page 22: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Start & Enddepends on direction

MAIN START

MAIN END

CROSS ENDCENTERCROSS START

Page 23: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Page 24: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Direction

#bob { flex-flow: row wrap; }

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

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

SHORTHAND:

Page 25: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Flex

.foo { flex: 0 1 100px; }

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

EXAMPLE:

Page 26: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Flex

.foo { flex: initial; }

.foo { flex: 0 1 auto;}

IS EQUIVALENT TO:

common values (1)

width: 150px

width: 150px

width: 150px

Page 27: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Flex

.foo { flex: auto; }

.foo { flex: 1 1 auto;}

IS EQUIVALENT TO:

common values (2)

width: 150px

width: 150px

width: 150px

Page 28: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Flex

.foo { flex: none; }

.foo { flex: 0 0 auto;}

IS EQUIVALENT TO:

common values (3)

width: 150px

width: 150px

width: 150px

Page 29: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Flex

.foo { flex: [n]; }

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

IS EQUIVALENT TO:

common values (4)

flex: 1 flex: 1 flex: 1

Page 30: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Flex flex: [n]

flex: 1 flex: 1 flex: 2

Page 31: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Flex flex: [n]

flex: 1 flex: 5 flex: 2

Page 32: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Alignmentauto-margins

margin-top: auto

no margin no margin

.foo { margin-top: auto; }

Page 33: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

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

Page 35: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

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

Page 36: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Orderchanges the visual order vs. the source order

3 1 2

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

.foo { order: [n]; }

Page 37: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Common use casesTrue centering (both axes)

Unknown menu items

Display order

Wrapping (menu items, boxes)

Tab groups

Form layout

Page 38: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

A small example

Page 39: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Structured content

Page 40: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

Basic styles

Page 41: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

display:flex on container

Page 42: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

flex-direction:column

Page 43: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

margin-auto on icons and form

Page 44: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

flex:1 on input field

Page 45: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

order for avatar display

Page 46: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

done.

Page 47: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

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

Page 48: Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)

have funkeep learning

THANK YOU! @stephenhay