Flex Container
Flexbox container properties control how the children flow: which axis, how they wrap, how they're spaced and aligned.
Container properties
| Property | Values | Controls |
|---|---|---|
display | flex / inline-flex | Turn the element into a flex container. |
flex-direction | row (default), column, row-reverse, column-reverse | Main axis direction. |
flex-wrap | nowrap (default), wrap, wrap-reverse | Whether items wrap onto new lines. |
flex-flow | shorthand for direction + wrap | row wrap |
justify-content | flex-start, center, space-between, space-around, space-evenly | Distribution along the main axis. |
align-items | stretch, flex-start, flex-end, center, baseline | Cross-axis alignment per row. |
align-content | Same values as justify-content | Cross-axis distribution when items wrap onto multiple lines. |
gap | any length | Space between items (replaces margins). |
The toolbar pattern
CSS
.toolbar {
display: flex;
align-items: center; /* vertically centre everything */
gap: 12px; /* even spacing between items */
}
.toolbar .spacer { flex: 1; } /* eats the leftover room, pushes the rest right */
Tip:
align-content only does anything when items wrap onto more than one line. On a single-row flex container, it's align-items you want.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>Flex Container</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Space the toolbar items evenly across the main axis.
.toolbar { display: flex;
-content: space-between; }
It distributes along the main axis.
Discussion
Loading…