Flexbox

The Flexible Box Layout, commonly known as Flexbox, is a layout model that allows for responsive elements within a container that can automatically adapt to differing screen sizes.

div {
  display: flex;
}

to clipboard
Copy to clipboard

Background

Flexbox is a layout model for creating increased flexibility in the arrangement and display of content within a container to better meet the demands of the modern web. Previously, the ways in which content could be specified within a container was much more limited and brittle. With the popularity of mobile devices, web content must now adapt to accurately render across a much larger range of conditions.

The fundamental function of flexbox is to provide the capacity for content within a container to expand and contract in response to different viewing contexts. This is achieved by applying various parameters to content within a container to elicit specific behavior or formatting, such as wrapping to fill additional space, or shrinking an item to meet the constraints of a smaller screen. Flexbox parameters are leveraged to manipulate items within a container across two dimensions, the main-axis and the cross-axis.

Video Walkthrough

Watch this video for a step-by-step demonstration on how to use CSS flexbox.