CSS Flexbox, short for Flexible Box Layout, is a modern layout system designed to arrange elements efficiently within a container. It simplifies the process of creating responsive and well-aligned webpage layouts without relying on older techniques such as floating elements or complex positioning.
Modern websites must adapt to different screen sizes, including desktops, tablets, laptops, and smartphones. Flexbox provides a flexible way to distribute available space, align items, and organize webpage components automatically, making responsive design much easier.
Whether you are building a navigation menu, pricing section, image gallery, dashboard, or card layout, Flexbox offers powerful alignment and spacing capabilities that reduce the amount of CSS required while improving readability and maintainability.
In this tutorial, you will learn the fundamental concepts of CSS Flexbox, understand how flex containers and flex items work, and explore practical examples that help you build professional and responsive web layouts.
CSS Flexbox is a one-dimensional layout model that arranges elements either horizontally or vertically. It allows developers to control the size, alignment, spacing, and order of items inside a container without writing complicated layout code.
Unlike traditional layout methods, Flexbox automatically adjusts the available space between elements. This makes it ideal for designing responsive interfaces where components need to resize or reposition based on the screen size.
A Flexbox layout always consists of two main parts:
Once an HTML element becomes a flex container, all of its direct child elements automatically become flex items and follow the Flexbox layout rules.
Before Flexbox was introduced, developers often used floats, inline-block elements, and complicated positioning techniques to create webpage layouts. These methods required extra code and often produced alignment problems.
Flexbox solves these issues by providing built-in alignment, spacing, ordering, and sizing features. It reduces development time while making layouts easier to understand and maintain.
A Flex Container is the parent element that controls the layout of all its direct child elements. To create a Flex Container, the CSS property display: flex; is applied to the parent element.
After this property is applied, every direct child automatically becomes a Flex Item and follows the layout rules defined by the Flexbox model.
.container{
display:flex;
}
<div class="container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
By default, all three items will be displayed in a horizontal row because the parent element is a Flex Container.
Flex Items are the direct child elements inside a Flex Container. These elements automatically participate in the Flexbox layout and can be aligned, resized, reordered, or spaced using various Flexbox properties.
Each Flex Item can grow, shrink, or occupy available space depending on the layout rules defined for the container or the individual item.
<div class="container"> <div>HTML</div> <div>CSS</div> <div>JavaScript</div> </div>
Here, the three child elements become Flex Items because they are placed directly inside the Flex Container.
Flexbox organizes items using two imaginary axes that determine the direction of alignment and spacing.
By default, the Main Axis runs from left to right, while the Cross Axis runs from top to bottom. These directions can change depending on the flex-direction property.
Cross Axis
↑
|
+-----------------------------+
| Item1 Item2 Item3 Item4 |
+-----------------------------+
------------→ Main Axis
Understanding these two axes is essential because most Flexbox properties work by controlling alignment along either the Main Axis or the Cross Axis.
The display: flex; property converts a normal HTML container into a Flex Container. This single property activates the Flexbox layout model and allows all direct child elements to be arranged using Flexbox rules.
.container{
display:flex;
background:#f5f5f5;
padding:20px;
}
Once this property is applied, the browser places all direct child elements in a flexible horizontal layout unless another direction is specified.
The following example demonstrates how a simple Flexbox layout arranges multiple boxes in a single horizontal row.
<div class="container"> <div>HTML</div> <div>CSS</div> <div>JavaScript</div> </div>
.container{
display:flex;
gap:15px;
}
.container div{
padding:20px;
background:#dbeeff;
border:1px solid #0077cc;
}
In this example, all three boxes are displayed in a horizontal row with equal spacing between them. This simple layout demonstrates the power of Flexbox, where only a few CSS properties are required to create an organized and responsive design.
The flex-direction property determines the direction in which Flex Items are arranged inside a Flex Container. By changing this property, developers can display items horizontally, vertically, or in reverse order without modifying the HTML structure.
The default value is row, which places all items from left to right. Other values allow greater flexibility when designing responsive layouts.
.container{
display:flex;
flex-direction:value;
}
| Value | Description |
|---|---|
| row | Items are displayed horizontally from left to right. |
| row-reverse | Items are displayed horizontally from right to left. |
| column | Items are displayed vertically from top to bottom. |
| column-reverse | Items are displayed vertically from bottom to top. |
.container{
display:flex;
flex-direction:column;
}
In this example, all Flex Items will be arranged vertically instead of horizontally.
By default, Flexbox tries to fit all Flex Items into a single row. When there are many items, they may become too small or overflow outside the container. The flex-wrap property allows items to move onto additional rows or columns whenever necessary.
.container{
display:flex;
flex-wrap:wrap;
}
| Value | Description |
|---|---|
| nowrap | Default value. Items remain in one line. |
| wrap | Items move to the next line if required. |
| wrap-reverse | Items wrap in the reverse direction. |
.container{
display:flex;
flex-wrap:wrap;
gap:15px;
}
Using wrap creates responsive layouts that automatically adjust to different screen sizes.
The flex-flow property is a shorthand that combines the flex-direction and flex-wrap properties into a single declaration. It makes CSS shorter and easier to read.
.container{
flex-flow:row wrap;
}
.container{
display:flex;
flex-flow:column wrap;
}
This example displays items vertically while allowing them to wrap whenever additional space is needed.
The justify-content property aligns Flex Items along the Main Axis. It controls how extra horizontal or vertical space is distributed between items.
| Value | Description |
|---|---|
| flex-start | Items begin from the start. |
| flex-end | Items move to the end. |
| center | Items appear in the center. |
| space-between | Equal space between items. |
| space-around | Equal space around every item. |
| space-evenly | Equal spacing throughout the container. |
.container{
display:flex;
justify-content:space-between;
}
This property is widely used in navigation menus, headers, footers, and responsive layouts.
The align-items property aligns Flex Items along the Cross Axis. It determines how items are positioned vertically when the default row direction is used.
| Value | Description |
|---|---|
| stretch | Default value. Items stretch to fill the container. |
| flex-start | Items align at the beginning. |
| flex-end | Items align at the end. |
| center | Items align in the middle. |
| baseline | Items align according to text baselines. |
.container{
display:flex;
align-items:center;
height:250px;
}
This property is useful for vertically centering content inside cards, banners, and sections.
The align-content property controls the spacing between multiple rows of Flex Items. It works only when items wrap onto more than one line using the flex-wrap property.
.container{
display:flex;
flex-wrap:wrap;
align-content:space-around;
height:350px;
}
This property helps distribute multiple rows evenly inside larger containers.
The gap property creates consistent spacing between Flex Items without using individual margins. It produces cleaner code and improves layout consistency.
.container{
display:flex;
gap:20px;
}
.container{
display:flex;
gap:25px;
}
The gap property is commonly used in card layouts, image galleries, navigation menus, and responsive grids.
The following example combines several Flexbox properties to create a responsive layout.
<div class="container"> <div>HTML</div> <div>CSS</div> <div>JavaScript</div> <div>Bootstrap</div> </div>
.container{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:20px;
padding:20px;
}
.container div{
padding:20px;
background:#e8f4ff;
border:1px solid #0077cc;
width:180px;
text-align:center;
}
This layout automatically adjusts the position of the boxes based on the available screen width. The items remain evenly spaced, properly aligned, and responsive without requiring complex CSS code.
The order property allows developers to change the visual position of Flex Items without modifying the HTML structure. By default, every Flex Item has an order value of 0. Items with smaller values appear before items with larger values.
This property is especially useful in responsive web design where the visual arrangement of elements needs to change for different screen sizes while keeping the HTML clean and accessible.
.item{
order:1;
}
.container{
display:flex;
}
.item1{
order:3;
}
.item2{
order:1;
}
.item3{
order:2;
}
The display order becomes Item2 → Item3 → Item1 even though the HTML order remains unchanged.
The flex-grow property determines how much a Flex Item should expand when extra space is available inside the Flex Container. Items with higher values occupy more available space than items with lower values.
.item{
flex-grow:1;
}
.container{
display:flex;
}
.item1{
flex-grow:1;
}
.item2{
flex-grow:2;
}
In this example, the second item occupies approximately twice as much available space as the first item.
The flex-shrink property specifies how much a Flex Item should reduce in size when there is insufficient space inside the Flex Container.
The default value is 1, meaning every item can shrink proportionally if necessary.
.item{
flex-shrink:1;
}
.item1{
flex-shrink:0;
}
.item2{
flex-shrink:1;
}
Here, the first item keeps its original width while the second item becomes smaller when space is limited.
The flex-basis property specifies the initial size of a Flex Item before any remaining space is distributed. It provides a flexible alternative to using the width property.
.item{
flex-basis:250px;
}
.container{
display:flex;
}
.item{
flex-basis:200px;
}
Each Flex Item begins with a width of 200 pixels before Flexbox calculates additional space distribution.
The flex property is a shorthand that combines flex-grow, flex-shrink, and flex-basis into a single declaration. It simplifies CSS and makes layouts easier to manage.
.item{
flex:1 1 200px;
}
The shorthand values represent:
The align-self property overrides the align-items value for an individual Flex Item. It allows one specific item to have different alignment from the rest of the items in the container.
.item{
align-self:center;
}
.container{
display:flex;
height:250px;
align-items:flex-start;
}
.item2{
align-self:flex-end;
}
Only the second item moves to the bottom of the container while the remaining items stay at the top.
One of the biggest advantages of Flexbox is its ability to create responsive layouts with very little CSS. By combining Flexbox properties with media queries, developers can easily adjust layouts for different screen sizes.
.container{
display:flex;
gap:20px;
}
@media(max-width:768px){
.container{
flex-direction:column;
}
}
In this example, items appear in a horizontal row on larger screens and automatically stack vertically on smaller devices, providing a better user experience.
CSS Flexbox is a one-dimensional layout system used to align, distribute, and organize elements efficiently inside a container.
The parent element using display:flex is called the Flex Container, while its direct child elements are called Flex Items.
The default value is row.
The justify-content property controls spacing and alignment along the Main Axis.
The order property changes the visual order of Flex Items without modifying the HTML source.
CSS Flexbox is one of the most powerful layout systems available in modern web development. It provides an efficient way to arrange, align, and distribute elements while reducing the complexity of traditional CSS layout techniques. Features such as flexible sizing, automatic spacing, and responsive alignment make Flexbox an essential tool for creating modern websites.
After mastering Flexbox, developers can build responsive navigation bars, galleries, forms, dashboards, and card-based layouts with significantly less code. A strong understanding of Flexbox also prepares you for learning advanced layout systems such as CSS Grid and responsive web design.