CSS Tutorial
CSS Flexbox
CSS Flexbox (Flexible Box Layout) is a powerful layout module that makes it easier to design flexible, responsive layouts without using floats or complex positioning. Flexbox arranges items in a row or column and distributes space automatically based on screen size.
Why Flexbox?
Flexbox is used to:
- Align items horizontally or vertically
- Distribute space evenly
- Create responsive layouts
- Center elements easily (even vertically!)
- Reorder content without changing HTML
Flexbox Main Concepts
1. Flex Container
The parent element where Flexbox is applied.
.container {
display: flex;
}
2. Flex Items
The child elements inside the flex container.
Common Flexbox Properties (Container)
| Property | Description |
|---|---|
display: flex |
Enables Flexbox |
flex-direction |
Sets direction of items (row/column) |
flex-wrap |
Allows items to wrap to the next line |
justify-content |
Aligns items horizontally |
align-items |
Aligns items vertically |
align-content |
Aligns multiple rows (when wrapped) |
gap |
Adds space between items |
Common Flexbox Properties (Items)
| Property | Description |
|---|---|
| flex | Shorthand for grow, shrink, basis |
| flex-grow | How much item should grow |
| flex-shrink | How much item should shrink |
| flex-basis | Initial size of item |
| align-self | Overrides vertical alignment per item |
| order | Changes display order |
Flexbox Directions
flex-direction value |
Behavior |
|---|---|
row (default) |
Items placed left → right |
row-reverse |
Items placed right → left |
column |
Items placed top → bottom |
column-reverse |
Items placed bottom → top |
Examples
Center an element (horizontally & vertically)
.container {
display: flex;
justify-content: center;
align-items: center;
}
Create equal-width columns
.item {
flex: 1;
}
Use Cases
- Navigation bars
- Responsive card layouts
- Centering content
- Product grids
- Sidebar layouts