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).
