Flexbox

What is Flexbox?

  • New layout mode introduced with CSS3

  • Allows developers to create flexible layouts without having to rely on floats or inline-block elements

  • Is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based)

  • Widely supported across all modern browsers

See the full list of layout modes here


What problems does Flexbox solve?

  • Vertically centering a block of content inside its parent

  • Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available

  • Making all columns in a multiple column layout adopt the same height even if they contain a different amount of content