Flexbox

Modern CSS Layouting

A brief history

  • Tables
  • Floats
  • Framework grids

Overview

  • Native support
  • IE10+ (with caveats)
  • Vendor prefixes required

But what is it?

  • Layouting method
  • Efficient way align / distribute space for dynamic items in a container
  • Content-based widths / heights
  • Aligned along an axis
  • http://codepen.io/anon/pen/zBQrNy

It's all about the container

  • display: flex on parent
    • Enables flex context for direct children
  • flex-direction sets the main axis
    • Default is row (X-axis)
    • Switching to column sets X-axis as main and Y-axis as cross 
    • Reverse is an option

It's all about the container

  • Distribute elements
    • justify-content on parent justifies content across main axis
      • space-between, space-around, flex-end, flex-start, center
  • Align items to each other
    • align-items on parent aligns items on cross axis
      • center, flex-start, flex-end, stretch

Child properties

  • Properties can be set on a child-by-child basis as well
  • flex-grow
    • default is 0
    • How much an element will "grow" relative to other items
    • Often set to 1 to take up remaining space

Child properties

  • flex-basis
    • Sets size of content box
    • Default is auto
    • Can be a way to set a pre-determined "width" on a flex context item
  • Flex-grow: 1; flex-basis: 0; creates equal width columns

Child properties

  • flex-wrap
    • Sets if elements should be forced into one line on main axis, or if they're allowed to wrap
    • Default is nowrap

Child properties

  • flex-wrap
    • Sets if elements should be forced into one line on main axis, or if they're allowed to wrap
    • Default is nowrap

Real world applications

http://lacksvalley-content.adagetech.net/

http://ncreif.adagetech.net/

http://lacksvalley-content.adagetech.net/en/locations/

file://store/Graphics/+%20Creative%20Resources/FED/FED%20Code%20Exercise/FED%20Example%20Exercises/Emily/index.html

How do I know if I'm doing it wrong?

  • If you've set loads of flex properties take a step back
  • Often time, setting a few parent properties is all you need!
  • Think about content flexibility - what if the text / image place in an element is a different length / size?

What if I'm lazy?

  • Use a pre-defined mixin that matches the component type
  • Set up with any necessary parameters
    • Logic related to margins / responsive is done
  • store/Graphics/+%20Creative%20Resources/
  • FED/FED%20Project%20Setup/sassdoc/index.html

Further Reading

  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • https://www.smashingmagazine.com/2015/03/harnessing-flexbox-for-todays-web-apps/
  • http://flexboxin5.com/
  • http://flexboxfroggy.com/

Flexbox

By ehayman

Flexbox

  • 1,725