CSS Tutorial
Introduction
CSS Properties
CSS Designing
CSS Advance Topics
CSS FAQs
CSS Flexbox
Flexbox (short for Flexible Box Layout) is a modern layout model in CSS that allows you to align, distribute, and organize items within a container, even when their sizes are unknown or dynamic. It’s a powerful tool for creating responsive designs.
Flex Container Basics
To enable Flexbox, you apply display: flex to a container element. All direct children of this container become flex items.
span {
display: inline;
}
This enables you to control alignment, spacing, direction, and more.
Flex Container Properties
flex-direction
Defines the main axis and the direction in which items are placed.
.container {
display: flex;
flex-direction: row;
}
Possible values:
row(default): left to rightrow-reverse: right to leftcolumn: top to bottomcolumn-reverse: bottom to top
flex-wrap
By default, flex items stay on a single line and may shrink to fit. flex-wrap allows them to wrap to the next line.
.container {
display: flex;
flex-wrap: wrap;
}
You can combine direction and wrapping using the shorthand:
.container {
flex-flow: row wrap;
}
justify-content
Aligns items horizontally (along the main axis)..
.container {
justify-content: space-between;
}
Common values:
flex-startflex-endcenterspace-betweenspace-aroundspace-evenly
align-items
Aligns items vertically (along the cross axis).
.container {
align-items: center;
height: 200px;
}
Values include:
stretch(default)centerflex-startflex-endbaseline
align-content
Works similarly to align-items, but only applies when items wrap into multiple rows.
.container {
align-content: space-around;
flex-wrap: wrap;
height: 300px;
}
Flex Item Properties
1. order
Controls the visual order of flex items, independent of their HTML order.
<div class="box" style="order: 3;">First</div>
<div class="box" style="order: 1;">Second</div>
<div class="box" style="order: 2;">Third</div>
2. flex-grow and flex-shrink
These properties control how much a flex item grows or shrinks compared to others.
Use flex-shrink similarly to control how items shrink when space is limited.
<div class="box" style="flex-grow: 1;">A</div>
<div class="box" style="flex-grow: 2;">B (grows more)</div>
<div class="box" style="flex-grow: 1;">C</div>
3. align-self
Overrides align-items for individual items.
<div class="box" style="align-self: flex-end;">Aligned Differently</div>
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Flexbox - Learn With Arshyan</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background-color: #f0f0f0;
padding: 20px;
gap: 15px;
}
.flex-container .box {
background-color: #4a47a3;
color: white;
padding: 20px;
flex-grow: 1;
flex-basis: 150px;
text-align: center;
border-radius: 4px;
}
.flex-container .highlight {
order: 4;
align-self: flex-start;
background-color: #2ab7ca;
}
</style>
</head>
<body>
<h2>Flexbox Layout Example - Learn With Arshyan</h2>
<div class="flex-container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box highlight">Box 3 (Custom Order)</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
</div>
</body>
</html>
Summary Table
| Property | Description |
|---|---|
display: flex | Creates a flex container |
flex-direction | Sets item direction (row, column, etc.) |
flex-wrap | Allows wrapping of items |
justify-content | Aligns items along main axis |
align-items | Aligns items along cross axis |
align-content | Aligns wrapped lines |
order | Changes order of items |
flex-grow | Defines growth ratio |
flex-shrink | Defines shrink ratio |
align-self | Overrides alignment for single item |