CSS Flexbox Layout

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.


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>

CSS flexbox Properties (for parents)

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

displayWill treat a container (<div>) as flexbox.
justify-contentSpecifies 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-directionSpecifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
flex-wrapSpecifies whether flex items are forced onto one line or can wrap onto multiple lines.
flex-flowA shorthand property for flex-direction and flex-wrap properties.
align-itemsSpecifies the align-self value on all direct children as a group.
align-contentSpecifies 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.

orderSpecifies the order to lay out an item in a flex or grid container.
flex-growSpecifies how much of the remaining space in the flex container should be assigned to that item.
flex-shrinkSpecifies the flex shrink factor of a flex item.
flex-basisSpecifies the initial main size of a flex item.
flexSpecifies how a flex item will grow or shrink to fit the space available in its flex container.
align-selfThe 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.


Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author