CSS Flexbox
Flexbox is a layout system for placing items in one row or one column, and for sharing space between them.
The Flex Container
Put display: flex on a parent element. The parent becomes a flex container, and its direct children become flex items. By default the items line up in a row.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 10px;
background-color: #eef2ff;
padding: 10px;
}
.item {
background-color: #264de4;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>gap adds space between the items without adding it at the edges.
Container Properties
| Property | Common values | What it does |
|---|---|---|
flex-direction | row, column, row-reverse | The direction of the main axis |
justify-content | flex-start, center, flex-end, space-between, space-around | Spreads items along the main axis |
align-items | stretch, center, flex-start, flex-end | Lines up items on the cross axis |
flex-wrap | nowrap, wrap | Lets items move to a new line |
gap | 10px, 1rem | Space between items |
With flex-direction: row, the main axis is horizontal and the cross axis is vertical. With column, they swap.
A Navigation Bar
justify-content: space-between pushes the first and last items to the edges. align-items: center centres everything vertically.
Example
<!DOCTYPE html>
<html>
<head>
<style>
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #1e293b;
padding: 10px 20px;
}
.logo {
color: white;
font-size: 22px;
font-weight: bold;
}
.links {
display: flex;
gap: 18px;
}
.links a {
color: #cbd5e1;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<div class="logo">Karachi Kitchen</div>
<div class="links">
<a href="#">Menu</a>
<a href="#">Order</a>
<a href="#">Contact</a>
</div>
</nav>
</body>
</html>Centring Anything
Flexbox makes perfect centring easy, both across and down:
Example
.center-box {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}Item Properties
The flex property on an item says how much of the free space it should take.
| Value | Meaning |
|---|---|
flex: 1 | Grow to fill free space, sharing equally |
flex: 2 | Take twice as much free space as a flex: 1 item |
flex: 0 0 200px | Do not grow, do not shrink, stay 200px |
Example
<!DOCTYPE html>
<html>
<head>
<style>
.layout {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.sidebar {
flex: 1;
min-width: 150px;
background-color: #fde68a;
padding: 15px;
}
.main {
flex: 3;
min-width: 250px;
background-color: #bbf7d0;
padding: 15px;
}
</style>
</head>
<body>
<div class="layout">
<div class="sidebar">Sidebar (flex: 1)</div>
<div class="main">Main content (flex: 3). Make the window narrow and the boxes wrap onto two lines.</div>
</div>
</body>
</html>Flexbox is best for one direction: a row of buttons, a menu, a card's content. For a full page layout with rows and columns, CSS Grid (next chapter) is often easier.
Exercise
Exercise
Which property spreads flex items along the main axis, for example with space between them?