CSS Flexbox Layout
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.
CSS flexbox Properties (for parents)
The following table provides a list of CSS properties to control all the flex items in a flex container.
|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.
|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.|
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
This channel is primarily useful for Full Stack Web Developer.