The Box Alignment Specification details how alignment works in various layout methods; on this page we explore how box alignment works in the context of Flexbox. As this page aims to detail things which are specific to Flexbox and box alignment, it should be read in conjunction with the main Box Alignment page which details the common features of box alignment across layout methods.
In this example, three flex items are aligned on the main axis using justify-content and on the cross axis using align-items. The first item overrides the align-items values set on the group by setting align-self to center.
Flexbox respects the writing mode of the document, therefore if you are working in English and set justify-content to flex-end this will align the items to the end of the flex container. If you are working with flex-direction set to row, this alignment will be in the inline direction.
However, in Flexbox you can change the main axis by setting flex-direction to column. In this case justify-content will align items in the block direction. Therefore it is easiest to think about the main and cross axis when working in Flexbox like so:
flex-direction = alignment via justify-content
align-content, align-self/align-items
On the main axis Flexbox deals with our content as a group. The amount of space required to lay out the items is calculated, and the leftover space is then available for distribution. The justify-content property controls how that leftover space is used. Set justify-content: flex-end and the extra space is placed before the items, justify-content: space-around and it is placed either side of the item in that dimension, etc.
This means that a justify-self property does not make sense in Flexbox as we are always dealing with moving the entire group of items around.
On the cross axis align-self makes sense as we potentially have additional space in the flex container in that dimension, in which a single item can be moved to the start and end.
There is a specific use case in Flexbox where we might think that a justify-self property is what we need, and this is when we want to split a set of flex items, perhaps to create a split navigation pattern. For this use case we can use an auto margin. A margin set to auto will absorb all available space in its dimension. This is how centering a block with auto margins works. By setting the left and right margin to auto, both sides of our block try to take up all of the available space and so push the box into the centre.
By setting a margin of auto on one item in a set of flex items all aligned to start, we can create a split navigation. This works well with Flexbox and the alignment properties. As soon as there is no space available for the auto margin, the item behaves in the same way as all the other flex items and shrinks to try to fit into the space.
gap propertiesOn the main axis, the column-gap property will create fixed size gaps between adjacent items.
On the cross axis the row-gap property will create spacing between adjacent flex lines, therefore flex-wrap must also be set to wrap for this to have any effect.
Note: As of Firefox 63, Firefox is the only browser to have implemented the gap properties for Flexbox.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox