cssflexbox

vertically justified flexbox elements


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 ?


Solution

  • 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/