Flexbox Intro
Flexbox is a one-dimensional layout system. Set display: flex on a parent and its children line up along a single axis with smart sizing.
Main axis and cross axis
Container properties
| Property | What it controls | Common values |
|---|---|---|
flex-direction | Main-axis direction. | row, column, row-reverse |
justify-content | Alignment along the main axis. | flex-start, center, space-between |
align-items | Alignment along the cross axis. | stretch, center, flex-end |
flex-wrap | Whether items wrap to new lines. | nowrap, wrap |
gap | Space between items. | 10px, 1rem |
Tip: Reach for flexbox when items go in a row or a column. Reach for CSS Grid when you have rows and columns to coordinate.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
.row { display: flex; gap: 10px; }
.row > div { background: #04AA6D; color: #fff; padding: 20px; flex: 1; text-align: center; }
</style>
</head>
<body>
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Try it Yourself »
Exercise
Turn the parent into a flex container and centre its children horizontally.
.row {
display:
;
justify-content: center;
}
The same name as the layout system.
Discussion
Loading…