The justify-content property aligns flex items within the flex container along the main axis. This is the real beauty of a flexible box. One of the properties ( justify-content) belongs to the main axis, while the other three ( align-items, align-self, align-content) belong to the cross axis.Īs you might expect, the behaviour of the alignment properties depends on the flex-direction property. For instance, justify-content aligns the items horizontally if flex-direction is row or row-reverse, but vertically if flex-direction is column or column-reverse. I’ll use very simple HTML markup, just nine boxes stacked upon one other:įlexbox alignment can happen along both the main and cross axes. flex-direction: column-reverse – main axis runs from bottom to top.flex-direction: column – main axis runs from top to bottom.flex-direction: row-reverse – main axis runs from right to left.flex-direction: row – main axis runs from left to right (this is the default).The direction of the main axis is determined by the flex-direction property–there are four possible values: You can justify the flex items in that one direction and align the spacing between the individual items along the cross axis. rows and columns), flex items can only flow in one direction, along the main axis. Even if your layout looks like it has two dimensions (i.e. To avoid being confused by alignment properties, always keep in mind that when you use flexbox, you are working with a one-dimensional model. The cool part about flexbox is that you can define the direction of that one dimension by setting the position of the main axis, therefore you can create both row-based and column-based layouts.
Flexbox, on the other hand, has one primary and one secondary axis, as its purpose is to be a one-dimensional layout model. This is because the creators of web standards intended CSS grid to be used as a two-dimensional layout model. By design, CSS grid has two non-hierarchical axes: the row and column axes. This hierarchical relationship constitutes the main difference between flexbox and CSS Grid Layout.
The cross axis is always perpendicular to the main axis. As their names suggest, these axes form a hierarchical relationship, the main axis being superior to the cross axis. When using flexbox we work with two axes: the main and cross axes. A Comprehensive Guide to Flexbox Alignment
0 kommentar(er)
