Version:

How do I use flexbox to layout my content?

Use our interactive flexbox demo below to visualise how flex can help you layout your content.

Browser support

Some flex properties/values have limited browser support. Please refer to the compatibility link that accompanies each property for latest browser support.

 = Default value for a flex property when not set
 = Active flex property value

Flex container properties

A flexbox layout is defined using the flex or inline-flex values of the display property on the parent item. This element then becomes a flex container, and each one of its children becomes a flex item.

A value of flex causes the element to become a block level flex container, and inline-flex an inline level flex container.

flex-direction: Browser compatibility

flex-wrap: Browser compatibility

justify-content: Browser compatibility

align-content: Browser compatibility

align-items: Browser compatibility

Flex item properties

The direct children of a flex container become flex items. Nesting is possible and often needed in layouts, so an element can be a flex container and a flex item at the same time.

The flex item examples will be applied to the second flex item (dark blue).

flex-basis: Browser compatibility

flex-grow: Browser compatibility

flex-shrink: Browser compatibility

align-self: Browser compatibility

DX8 knowledge base icon

Frequently asked questions

Get instant answers to common questions. Available online 24/7.

Find answers

Raise a ticket icon

Raise a support ticket

To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

Raise support ticket

Acquia

Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.