On the main axis, we align using the justify-content property. We will start with the main axis alignment. It doesn’t matter which way the axis is physically. Thinking in terms of main axis and cross axis, rather than horizontal and vertical really helps here. Alignment across the direction defined by flex-direction. Alignment in the same direction as your flex-direction justify- performs main axis alignment.Many people tell me that they struggle to remember whether to use properties which start with align- or those which start with justify- in flexbox.

Therefore, any new alignment capability for flexbox will be detailed in the Box Alignment specification and not in a future level of Flexbox. This means that we can use the same alignment properties in CSS Grid as we use in Flexbox - and in future in other layout contexts, too. This specification details how alignment works across the various layout contexts. The alignment properties that you might think of as the flexbox alignment properties are now fully defined in the Box Alignment Specification.

See the Pen Smashing Flexbox Series 2: center an item by Rachel Andrew ( on CodePen. Alignment became as simple as two lines of CSS:

So the ability to properly align items and groups of items was for many of us the most exciting thing about Flexbox when it first started to show up in browsers. If you have ever been confused about when to align and when to justify, I hope this article will make things clearer! History Of Flexbox Alignmentįor the entire history of CSS Layout, being able to properly align things on both axes seemed like it might truly be the hardest problem in web design.

This time we will take a look at the alignment properties, and how these work with Flexbox. In the first article of this series, I explained what happens when you declare display: flex on an element. 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.

Display flex vertical align middle