Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
S T E P H E N H AY
BDCONF, NASHVILLE 2013

Flexbox
O N E G I A N T L E A P F O R W E B L AY O U T
The design-in-the-browser hamburger
The design-in-the-browser hamburger
DESIGNER
The design-in-the-browser hamburger
DESIGNER

CODE
(the stuff that’s really happening)
The design-in-the-browser hamburger
DESIGNER

MAGIC

CODE
(the stuff that’s really happening)
The design-in-the-browser hamburger
DESIGNER

MAGIC

CODE
(the stuff that’s really happening)
The design-in-the-browser hamburger
DESIGNER

MAGIC

CODE
(the stuff that’s really happening)
The design-in-the-browser hamburger

DESIGNER
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 th...
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
CSS has been around for

17 years
and we finally have “real” layout
in the form of Flexible Box Layout Module

aka “Flexbox”
“Layout is hard.”
image: NASA
“Layout solutions are an
interesting area in CSS to me.”
– Tab Atkins
We’re talking about this version
http://dev.w3.org/csswg/css-flexbox/
Two major types of “real” web layout
Two major types of “real” web layout
Flexbox helps us deal with

Available

space
even when we don’t know what that will be
alignment

both horizontally and vertically

Flexbox helps us with
Flexbox helps us with

ordre
display
A quick introduction to Flexbox
Terminology
Axes & Size
Flex
Alignment
Order
Leave your layout baggage
at the door.
Terminology
Flex containers
Flex items
Main axis / size / dimension
Cross axis / size / dimension
Start / end
CODE
http://www.flickr.com/photos/evdaimon/337754011/
display: flex | inline-flex
Hi, Bob.
(Bob is a flex container)

#bob { display: flex; }
display: flex | inline-flex
Flex items
Items in a flex container are, by default, flex items
(even anonymous block boxes)

I’m a flex item!

Me too!

...
Direction
#bob {
flex-direction: row | row-reverse |
column | column-reverse;
flex-wrap: no-wrap | wrap | wrap-reverse;
}
...
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 & End
depends on direction
C R O S S S TA R T

M A I N S TA R T

CENTER

MAIN END

CROSS END
in the case of flex-dir...
Start & End
depends on direction
M A I N S TA R T

C R O S S S TA R T

CENTER

CROSS END

MAIN END
in the case of flex-dir...
Flex
.flex-item {
flex: flex-grow flex-shrink flex-basis;
}

EXAMPLE:

.foo { flex: 0 1 150px; }
Flex
.flex-item {
flex: flex-grow flex-shrink flex-basis;
}

EXAMPLE:

.foo { flex: 0 1 150px; }
Flex common values (1)
.foo { flex: initial; }
I S E Q U I VA L E N T T O :

.foo { flex: 0 1 auto;}

width:
150px

width:...
Flex common values (2)
.foo { flex: auto; }
I S E Q U I VA L E N T T O :

.foo { flex: 1 1 auto;}

width:
150px

width:
15...
Flex common values (3)
.foo { flex: none; }
I S E Q U I VA L E N T T O :

.foo { flex: 0 0 auto;}

width:
150px

width:
15...
Flex common values (4)
.foo { flex: [n]; }
I S E Q U I VA L E N T T O :

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

flex: 1

flex: 1

flex: ...
Flex flex: [n]

flex: 1

flex: 1

flex: 2
Flex flex: [n]

flex: 1

flex: 5

flex: 2
Alignment
auto-margins

.foo { margin-top: auto; }

no margin
margin-top: auto

no margin
Alignment
along the main axis: justify-content
(align-content for multiple lines along cross axis)

#bob { justify-content...
http://dev.w3.org/csswg/css-flexbox/
http://dev.w3.org/csswg/css-flexbox/
Alignment
along the cross axis: align-items
(align-self can be applied to the flex items themselves/individually)

#bob { ...
http://dev.w3.org/csswg/css-flexbox/
Order
changes the visual order vs. the source order

.foo { order: [n]; }

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

3

1

2
Common use cases
True centering (both axes)
Multi-box layouts (products, teasers)
Unknown menu items
Display order
Wrappin...
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 compatibility
source: http://beta.caniuse.com/#search=flexbox
Don’t sweat the prefixes
http://leaverou.github.io/prefixfree/
meh. (but go ahead if you really want to)

source: http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-f...
Syntax variations
http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/
Before you get all excited…
Flexboxes aren’t ideal for page layout
http://www.xanthir.com/blog/b4580
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 tools
is not how to use them, but when to use them.
have fun
keep learning
THANK YOU!
@stephenhay
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Upcoming SlideShare
Loading in …5
×

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

5,370 views

Published on

My talk on Flexbox for Breaking Development 2013 in Nashville

Published in: Technology
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. S T E P H E N H AY BDCONF, NASHVILLE 2013 Flexbox O N E G I A N T L E A P F O R W E B L AY O U T
  2. 2. The design-in-the-browser hamburger
  3. 3. The design-in-the-browser hamburger DESIGNER
  4. 4. The design-in-the-browser hamburger DESIGNER CODE (the stuff that’s really happening)
  5. 5. The design-in-the-browser hamburger DESIGNER MAGIC CODE (the stuff that’s really happening)
  6. 6. The design-in-the-browser hamburger DESIGNER MAGIC CODE (the stuff that’s really happening)
  7. 7. The design-in-the-browser hamburger DESIGNER MAGIC CODE (the stuff that’s really happening)
  8. 8. The design-in-the-browser hamburger DESIGNER MAGIC CODE
  9. 9. Designers aren’t stupid.
  10. 10. 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.
  11. 11. image: NASA
  12. 12. ~8 years image: NASA
  13. 13. https://en.wikipedia.org/wiki/File:First_Web_Server.jpg ~1 year
  14. 14. CASCADING STYLE SHEETS, LEVEL 1 ~2 years
  15. 15. CSS has been around for 17 years
  16. 16. and we finally have “real” layout in the form of Flexible Box Layout Module aka “Flexbox”
  17. 17. “Layout is hard.”
  18. 18. image: NASA
  19. 19. “Layout solutions are an interesting area in CSS to me.” – Tab Atkins
  20. 20. We’re talking about this version http://dev.w3.org/csswg/css-flexbox/
  21. 21. Two major types of “real” web layout
  22. 22. Two major types of “real” web layout
  23. 23. Flexbox helps us deal with Available space even when we don’t know what that will be
  24. 24. alignment both horizontally and vertically Flexbox helps us with
  25. 25. Flexbox helps us with ordre display
  26. 26. A quick introduction to Flexbox Terminology Axes & Size Flex Alignment Order
  27. 27. Leave your layout baggage at the door.
  28. 28. Terminology Flex containers Flex items Main axis / size / dimension Cross axis / size / dimension Start / end
  29. 29. CODE http://www.flickr.com/photos/evdaimon/337754011/
  30. 30. display: flex | inline-flex
  31. 31. Hi, Bob. (Bob is a flex container) #bob { display: flex; } display: flex | inline-flex
  32. 32. Flex items Items in a flex container are, by default, flex items (even anonymous block boxes) I’m a flex item! Me too! Me three!
  33. 33. Direction #bob { flex-direction: row | row-reverse | column | column-reverse; flex-wrap: no-wrap | wrap | wrap-reverse; } SHORTHAND: #bob { flex-flow: row wrap; }
  34. 34. Main axis + main size, main dimension in the case of flex-direction: row
  35. 35. Cross axis + cross size, cross dimension in the case of flex-direction: row
  36. 36. Start & End depends on direction C R O S S S TA R T M A I N S TA R T CENTER MAIN END CROSS END in the case of flex-direction: row
  37. 37. Start & End depends on direction M A I N S TA R T C R O S S S TA R T CENTER CROSS END MAIN END in the case of flex-direction: column
  38. 38. Flex .flex-item { flex: flex-grow flex-shrink flex-basis; } EXAMPLE: .foo { flex: 0 1 150px; }
  39. 39. Flex .flex-item { flex: flex-grow flex-shrink flex-basis; } EXAMPLE: .foo { flex: 0 1 150px; }
  40. 40. Flex common values (1) .foo { flex: initial; } I S E Q U I VA L E N T T O : .foo { flex: 0 1 auto;} width: 150px width: 150px width: 150px
  41. 41. Flex common values (2) .foo { flex: auto; } I S E Q U I VA L E N T T O : .foo { flex: 1 1 auto;} width: 150px width: 150px width: 150px
  42. 42. Flex common values (3) .foo { flex: none; } I S E Q U I VA L E N T T O : .foo { flex: 0 0 auto;} width: 150px width: 150px width: 150px
  43. 43. Flex common values (4) .foo { flex: [n]; } I S E Q U I VA L E N T T O : .foo { flex: [n] 1 0%;} flex: 1 flex: 1 flex: 1
  44. 44. Flex flex: [n] flex: 1 flex: 1 flex: 2
  45. 45. Flex flex: [n] flex: 1 flex: 5 flex: 2
  46. 46. Alignment auto-margins .foo { margin-top: auto; } no margin margin-top: auto no margin
  47. 47. Alignment along the main axis: justify-content (align-content for multiple lines along cross axis) #bob { justify-content: flex-start | flex-end | center | space-between | space-around } JUSTIFY-CONTENT in the case of flex-direction: row
  48. 48. http://dev.w3.org/csswg/css-flexbox/
  49. 49. http://dev.w3.org/csswg/css-flexbox/
  50. 50. Alignment along the cross axis: align-items (align-self can be applied to the flex items themselves/individually) #bob { align-items: flex-start | flex-end | center | baseline | stretch } ALIGN-ITEMS in the case of flex-direction: row
  51. 51. http://dev.w3.org/csswg/css-flexbox/
  52. 52. Order changes the visual order vs. the source order .foo { order: [n]; } .item:nth-child(3) { order: -1; } 3 1 2
  53. 53. 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
  54. 54. A small example
  55. 55. Structured content
  56. 56. Basic styles
  57. 57. display:flex on container
  58. 58. flex-direction:column
  59. 59. margin-auto on icons and form
  60. 60. flex:1 on input field
  61. 61. order for avatar display
  62. 62. done.
  63. 63. Browser compatibility source: http://beta.caniuse.com/#search=flexbox
  64. 64. Don’t sweat the prefixes http://leaverou.github.io/prefixfree/
  65. 65. meh. (but go ahead if you really want to) source: http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/
  66. 66. Syntax variations http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/
  67. 67. Before you get all excited…
  68. 68. Flexboxes aren’t ideal for page layout http://www.xanthir.com/blog/b4580
  69. 69. Flexbox is ideal for components http://pattern-lab.info/
  70. 70. Flexbox is ideal for components http://pattern-lab.info/
  71. 71. The hardest thing to learn about new tools is not how to use them, but when to use them.
  72. 72. have fun keep learning THANK YOU! @stephenhay

×