Flexbox

Long live the flexbox

Basics

Flexbox aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic

— Chris Coyier

Terms

  • Flex Container
  • Flex Items
  • Axis
  • Shrink & Grow
  • Order
  • Others

Using Flexbox

  • Dynamic Boxes
  • Media Object
  • Form Field
  • Vertical Centering

Resources

Takeaway

.try-me {
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: flexbox;
}

Thanks