Element alignment along the perpendicular axis — CSS: Flexbox fundamentals

• Do it yourself
• Docs

Aligning elements along the cross axis is one of the biggest headaches for the layout designers. I can't even count how many different ways exists to center the element on the cross axis. All methods have their advantages and disadvantages, but the most important thing is that none of them are universal.

The arrival of Flex meant that this problem could be solved once and for all using one simple property. This is excellent, because now we aren't concerned about external factors, like knowing the size of the outer or inner box, the number of lines of text, whether they can be moved, or browser support. All of this, well, except for browser support (I hope you're not developing for IE7), can now be disregarded using the simple align-items rule.

To demonstrate how the rule works, let's go to CodePen and add three blocks with different font sizes.

• stretch. This is a default value for flex children. It means that the height must be set automatically according to the maximum block height on the line. Previously, you needed JS for this. Blocks will automatically set the height only if there is no other height value for the block in CSS. If one of the blocks has its own height value, then everything depends on that value. If it's less than the height of the tallest block, then only that block's height will change. If the value is greater than the height of the tallest block, then all the blocks will automatically recalculate their height

• flex-start. If you use any other values, the height of the elements will only be set depending on how much the block needs based on the content, padding, and border. Only the location of the elements changes. flex-start tells the elements to be positioned starting from the beginning of the flex container along the cross axis

• center. The elements inside the flex container are centered along the cross axis

• flex-end. The elements inside the flex container are positioned starting from the end of the cross axis

The last value is baseline. If you are not familiar with the structure of fonts, it may seem unclear at first what the alignment's baseline is. The font baseline is an imaginary straight line that is drawn along the bottom edge of the letters not taking into account any descenders below the line, as is the case with letters suchs as "p", "j", "q" etc. This is best illustrated by the following picture:

The baseline of the font is highlighted in red. This is where the alignment will happen. The browser will find the element with the largest font size and align all elements to its baseline. And the other blocks will also be aligned to the baselines of the text inside them.

Do it yourself

Create several blocks of text inside the flex container. Set the alignment to the baseline and try changing the text length and font size within the blocks. Try to get a feel for the font's baseline and this alignment.

Docs

• align-items