• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
 

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

on

  • 2,843 views

My talk on Flexbox for Breaking Development 2013 in Nashville

My talk on Flexbox for Breaking Development 2013 in Nashville

Statistics

Views

Total Views
2,843
Views on SlideShare
2,743
Embed Views
100

Actions

Likes
13
Downloads
28
Comments
0

1 Embed 100

https://twitter.com 100

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 things easier. Flexbox is a step in the right direction.
    • 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! Me three!
    • Direction #bob { flex-direction: row | row-reverse | column | column-reverse; flex-wrap: no-wrap | wrap | wrap-reverse; } SHORTHAND: #bob { flex-flow: row wrap; }
    • 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-direction: row
    • 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
    • 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: 150px width: 150px
    • 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
    • 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
    • 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
    • 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: flex-start | flex-end | center | space-between | space-around } JUSTIFY-CONTENT in the case of flex-direction: row
    • 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 { align-items: flex-start | flex-end | center | baseline | stretch } ALIGN-ITEMS in the case of flex-direction: row
    • 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 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 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-flexbox/
    • 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