The old display: box
had the ability to justify elements vertically, so for N number of elements with H defined height, they will arrange themselves justified (vertically) in relation to the parent element.
Is there any way of achieving this using the current display: flex
system ?
You are looking for the flex rule justify-content: space-between;
. Put that on your parent element and it will align the items so the first one touches the start of the container, the last one touches the end of the container, and the rest of the space is distributed between the elements.
You can also use align-items
to align your elements in the direction perpendicular to your flex direction. For example if your flex-direction
is column
(vertical), then justify-content
will justify items vertically and align-items
will align them horizontally. Conversely if your flex-direction
is row
(horizontal), then justify-content
will justify items horizontally and align-items
will align them vertically.
More info here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/