FlexboxONE GIANT LEAP FOR WEB LAYOUT
STEPHEN HAYGENERATECONF 2013
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.”
“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
