700 B
700 B
title, tags
| title | tags |
|---|---|
| Evenly distributed children | layout,intermediate |
Evenly distributes child elements within a parent element.
<div class="evenly-distributed-children">
<p>Item1</p>
<p>Item2</p>
<p>Item3</p>
</div>
.evenly-distributed-children {
display: flex;
justify-content: space-between;
}
Explanation
display: flexenables flexbox.justify-content: space-betweenevenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.- Alternatively, use
justify-content: space-aroundto distribute the children with space around them, rather than between them.