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

Falling in Love with Flexbox

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.

Sallie Goetsch

October 23, 2016
Tweet

More Decks by Sallie Goetsch

Other Decks in Design

Transcript

  1. 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.
  2. 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
  3. .flex-container { display: flex; } .flex-item { flex: 0 1

    auto; } Sallie Goetsch • WP Fangirl • wpfangirl.com
  4. The div immediately surrounding the items you want to flex.

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

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

    this, flexbox doesn’t work. All the other properties have defaults.
  7. • 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
  8. Any ‘in-flow’ child of a flex container, e.g. <div>, <p>,

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

    Sallie Goetsch • WP Fangirl • wpfangirl.com
  10. 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
  11. 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
  12. flex: 0 1 auto; equals flex-grow: 0; flex-shrink: 1; flex-basis:

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

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

    • Negative numbers come before positive numbers Sallie Goetsch • WP Fangirl • wpfangirl.com
  15. • 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
  16. Because that stuff we just saw is way too confusing.

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

    messing about with padding. Just flexbox.
  18. .flex-container { display: flex; flex-wrap: wrap; } .flex-item { flex:

    1 1 150px; } Sallie Goetsch • WP Fangirl • wpfangirl.com
  19. • 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
  20. Sallie Goetsch • WP Fangirl • wpfangirl.com Email [email protected] Website

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