Loading...
Loading...
Create flexible one-dimensional layouts that adapt to any screen
Flexbox is a CSS layout mode for one-dimensional layouts (row or column). It makes aligning and distributing space among items easy.
.container { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; }| Property | What it does | Values |
|---|---|---|
| display: flex | Activates flexbox on the container | |
| flex-direction | Row (default) or column | row, column, row-reverse, column-reverse |
| justify-content | Main axis alignment | flex-start, center, flex-end, space-between, space-around |
| align-items | Cross axis alignment | flex-start, center, flex-end, stretch |
| gap | Space between items | 10px, 20px |
In a row (default): main axis is horizontal, cross axis is vertical.
In a column: main axis is vertical, cross axis is horizontal.
Create a horizontal navbar with display: flex, justify-content: center, gap: 20px.
<!DOCTYPE html>
<html><head><style>
nav { display: flex; justify-content: center; gap: 20px; background: #2c3e50; padding: 15px; }
nav a { color: white; text-decoration: none; padding: 8px 16px; border-radius: 4px; }
nav a:hover { background: #3498db; }
</style></head><body>
<nav>
<a href='#'>Home</a>
<a href='#'>About</a>
<a href='#'>Services</a>
<a href='#'>Contact</a>
</nav>
</body></html>