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/