Sign up for my newsletter here.In this article, we take a look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works. Would you like to be notified when I release a new course? You'll get early bird discounts. So I created a CSS course to help you avoid the same mistake. I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS. I believe it's the highest-ROI skill you can master.īefore I mastered CSS, I lost a ton of time & energy fiddling around with CSS. Remember, when flex-direction: column, things switch:īy the way, I think CSS is the 'bottleneck' to most websites & web apps. If you just want to align an individual flex-item, you can use align-self. If we now use align-items: center, we get this:

So things 'flip' when you use flex-direction: column. And the justify-content property, that we haven't discussed here yet but is what you would use for horizontal positioning in the default situation, is now used for vertical alignment. Now 'align-items' doesn't determine where flex-items should be positioned along the vertical axis, but along the horizontal axis. When you use flex-direction: column to change the direction that the flex-items should follow, things change. So the 'flex-' and 'grid-' prefixes get cut. However, flex-end is being phased out, because the Flexbox & CSS Grid properties are being harmonized (so we can use the same properties in both systems). Note that we used end here, but flex-end has better browser support. We can then use align-items to determine where along the vertical axis all the flex-items should be positioned.įor example, to position them in the center: We have now 'unlocked' Flexbox functionalities. The element with display: flex will become the so-called flex-container, and its direct child elements become the flex-items. To start using Flexbox, you only have to use display: flex on an element. If you haven't mastered both of them yet, I highly recommend going through my CSS Course.

You need to master both Flexbox and CSS Grid in order to professionally build modern websites & web apps.

Display flex text align center