Menu
The old display:box had the ability to justify element 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 dislpay:flex system?
648
Vertical and horizontal alignment By default items start from the left if flex-direction is row , and from the top if flex-direction is column . You can change this behavior using justify-content to change the horizontal alignment, and align-items to change the vertical alignment.
align-items and justify-content are the important properties to absolutely center text horizontally and vertically. Horizontally centering is managed by the justify-content property and vertical centering by align-items.
The justify-content property is a sub-property of the Flexible Box Layout module. It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.
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/
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
