Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
-
Upload
stephen-hay -
Category
Technology
-
view
114 -
download
1
description
Transcript of 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.
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.”
“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