Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Falling in Love with Flexbox

80a39eb1d7d169f5563483e61c3cba52?s=47 Sallie Goetsch
October 23, 2016

Falling in Love with Flexbox

WordCamp Sacramento 2016 Presentation. Learn about the cool things you can build using the CSS3 flexible box model, aka Flexbox.

80a39eb1d7d169f5563483e61c3cba52?s=128

Sallie Goetsch

October 23, 2016
Tweet

Transcript

  1. Sallie Goetsch • WordCamp Sacramento 2016 Sallie Goetsch • WP

    Fangirl • wpfangirl.com
  2. SLIDES: https://speakerdeck.com/wpfangirl/falling- in-love-with-flexbox CODE: https://gist.github.com/wpfangirl/ Sallie Goetsch • WP Fangirl

    • wpfangirl.com
  3. CSS Flexible Box Layout Module Level 1 Sallie Goetsch •

    WP Fangirl • wpfangirl.com https://www.w3.org/TR/css-flexbox-1/ The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
  4. Sallie Goetsch • WP Fangirl • wpfangirl.com

  5. Flexbox makes your browser calculate how many items fit across

    the screen, how wide each one should be, and where to put them. Sallie Goetsch • WP Fangirl • wpfangirl.com
  6. Sallie Goetsch • WP Fangirl • wpfangirl.com

  7. Sallie Goetsch • WP Fangirl • wpfangirl.com

  8. .flex-container { display: flex; } .flex-item { flex: 0 1

    auto; } Sallie Goetsch • WP Fangirl • wpfangirl.com
  9. Terminology & Defaults to Orient You Sallie Goetsch • WP

    Fangirl • wpfangirl.com
  10. The div immediately surrounding the items you want to flex.

    Sallie Goetsch • WP Fangirl • wpfangirl.com
  11. • display:flex • flex-direction • flex-wrap • align-content • align-items

    • justify-content Sallie Goetsch • WP Fangirl • wpfangirl.com
  12. display: flex Sallie Goetsch • WP Fangirl • wpfangirl.com Without

    this, flexbox doesn’t work. All the other properties have defaults.
  13. Sallie Goetsch • WP Fangirl • wpfangirl.com Origin

  14. Sallie Goetsch • WP Fangirl • wpfangirl.com

  15. • wrap Items will wrap into multiple rows when there

    are too many to fit on one line. • nowrap Items will shrink as far as possible. Content may overflow. Sallie Goetsch • WP Fangirl • wpfangirl.com
  16. Positions flex items parallel to flex-direction Sallie Goetsch • WP

    Fangirl • wpfangirl.com
  17. Positions items perpendicular to flex-direction. Sallie Goetsch • WP Fangirl

    • wpfangirl.com
  18. Positions rows/columns within the flex container. Sallie Goetsch • WP

    Fangirl • wpfangirl.com
  19. Any ‘in-flow’ child of a flex container, e.g. <div>, <p>,

    <h3> Sallie Goetsch • WP Fangirl • wpfangirl.com
  20. • flex-grow • flex-shrink • flex-basis • order • align-self

    Sallie Goetsch • WP Fangirl • wpfangirl.com
  21. 0 Item does not grow 1 Item grows at 1:1

    with other items 2 Item grows at 2:1 with other items Sallie Goetsch • WP Fangirl • wpfangirl.com
  22. 0 Item does not shrink 1 Item shrinks at 1:1

    with other items 2 Item shrinks at 2:1 with other items Sallie Goetsch • WP Fangirl • wpfangirl.com
  23. flex: 0 1 auto; equals flex-grow: 0; flex-shrink: 1; flex-basis:

    auto; Sallie Goetsch • WP Fangirl • wpfangirl.com
  24. Flex-basis should be in pixels rather than % if you

    want your flex items to wrap. Sallie Goetsch • WP Fangirl • wpfangirl.com
  25. • Determines display order of items • Default is 0

    • Negative numbers come before positive numbers Sallie Goetsch • WP Fangirl • wpfangirl.com
  26. • Positions the individual item perpendicular to flex- direction, irrespective

    of the align-items property on the flex container. • Takes the same arguments as align-items Sallie Goetsch • WP Fangirl • wpfangirl.com
  27. Because that stuff we just saw is way too confusing.

    Sallie Goetsch • WP Fangirl • wpfangirl.com
  28. Sallie Goetsch • WP Fangirl • wpfangirl.com No transforms. No

    messing about with padding. Just flexbox.
  29. display: flex; align-items: center; justify-content: center; Sallie Goetsch • WP

    Fangirl • wpfangirl.com
  30. Sallie Goetsch • WP Fangirl • wpfangirl.com

  31. Sallie Goetsch • WP Fangirl • wpfangirl.com align-items: flex-start

  32. align-items: stretch Sallie Goetsch • WP Fangirl • wpfangirl.com

  33. justify-content: space-between Sallie Goetsch • WP Fangirl • wpfangirl.com

  34. flex-wrap: wrap; Sallie Goetsch • WP Fangirl • wpfangirl.com Desktop

    View
  35. Sallie Goetsch • WP Fangirl • wpfangirl.com 1024px

  36. Sallie Goetsch • WP Fangirl • wpfangirl.com

  37. Sallie Goetsch • WP Fangirl • wpfangirl.com

  38. .flex-container { display: flex; flex-wrap: wrap; } .flex-item { flex:

    1 1 150px; } Sallie Goetsch • WP Fangirl • wpfangirl.com
  39. Sallie Goetsch • WP Fangirl • wpfangirl.com

  40. Sallie Goetsch • WP Fangirl • wpfangirl.com

  41. Sallie Goetsch • WP Fangirl • wpfangirl.com

  42. .flex-container:nth- of-type(odd) .image { order: -1;} .flex-container:nth- of-type(even) .image {

    order: 1;} Sallie Goetsch • WP Fangirl • wpfangirl.com
  43. Sallie Goetsch • WP Fangirl • wpfangirl.com

  44. Sallie Goetsch • WP Fangirl • wpfangirl.com

  45. .flex-container { display: flex; align-items: stretch; justify-content: space-between; } Sallie

    Goetsch • WP Fangirl • wpfangirl.com
  46. .flex-item { flex: 1 1 320px; display:flex; flex-direction:column; justify-content: space-between;

    } Sallie Goetsch • WP Fangirl • wpfangirl.com
  47. .buttons { align-self:center; margin-top:auto; margin-bottom: 20px; } Sallie Goetsch •

    WP Fangirl • wpfangirl.com
  48. Sallie Goetsch • WP Fangirl • wpfangirl.com http://caniuse.com/#feat=flexbox

  49. Sallie Goetsch • WP Fangirl • wpfangirl.com https://github.com/jonathantneal/flexibility

  50. • A Complete Guide to Flexbox • Flexbox Froggy •

    Ultimate Flexbox Cheat Sheet • What the Flexbox? • Smashing Book 5: Real Life Responsive Web Design Sallie Goetsch • WP Fangirl • wpfangirl.com
  51. Sallie Goetsch • WP Fangirl • wpfangirl.com Email sallie@wpfangirl.com Website

    https://wpfangirl.com Twitter @salliegoetsch GitHub https://github.com/wpfangirl SpeakerDeck https://speakerdeck.com/wpfangirl Meetup http://www.meetup.com/Eastbay- WordPress-Meetup/