CSS Flexbox Layout

February 10, 2021 12:37 pm IST

You are Here:

What is Flexbox Layout?

CSS flexbox is a one-dimensional (rows and columns) layout model. It has powerful alignment capabilities, which allows us to distribute space between items in an interface.

Note: CSS flexbox layout is preferred over the Grid layout as it offers more flexibility over items in an interface.

The following is a simple example of how the flexbox layout controls the items in an interface.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #parent{ display: flex; justify-content: space-around; flex-wrap: wrap; } #parent > div{ width: 90px; height: 90px; border: 1px solid #8c8c8c; margin: 10px; } </style> </head> <body> <h1>CSS flexbox</h1> <div id="parent"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> </div> </body> </html>

Run

CSS flexbox Properties (for parents)

The following table provides a list of CSS properties to control all the flex items in a flex container.

Property	Explanation
display	Will treat a container (<div>) as flexbox.
justify-content	Specifies how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
flex-direction	Specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
flex-wrap	Specifies whether flex items are forced onto one line or can wrap onto multiple lines.
flex-flow	A shorthand property for flex-direction and flex-wrap properties.
align-items	Specifies the align-self value on all direct children as a group.
align-content	Specifies the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.

CSS flexbox Properties (for child)

The following table provides a list of CSS properties to control a specific flex item in a flex container.

Property	Explanation
order	Specifies the order to lay out an item in a flex or grid container.
flex-grow	Specifies how much of the remaining space in the flex container should be assigned to that item.
flex-shrink	Specifies the flex shrink factor of a flex item.
flex-basis	Specifies the initial main size of a flex item.
flex	Specifies how a flex item will grow or shrink to fit the space available in its flex container.
align-self	The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.