Flexbox

Published Aug 6, 2021Updated Apr 16, 2023
Contribute to Docs

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;
}

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.

Flexbox

flex
A shorthand that combines the flex-grow, flex-shrink, and flex-basis properties. This syntax allows for the concise delineation of flex item parameters with one line of code.
flex-basis
A property that defines the default size of a flex item.
flex-direction
A property that specifies the direction in which elements are distributed within a container.
flex-flow
A shorthand for specifying the flex-direction and flex-wrap properties. Defining flex-flow provides the parameters for child elements to be organized across the horizontal and vertical axes.
flex-grow
A property that specifies how much space an item may occupy relative to the other items in the container. An item assigned a flex-grow value of 3, will stretch to occupy 3 times more space than an item assigned a value of 1.
flex-shrink
Specifies how much space an item may be scaled down relative to the other items in the container (when items in the flex container are larger than the space available). An item assigned a flex-shrink value of 2, will be scaled twice as much as an item assigned a value of 1.
flex-wrap
A property that specifies if elements will occupy multiple lines and the direction in which the items are distributed.

All contributors

Looking to contribute?

Learn CSS on Codecademy