Aligning Flexboxes Along the Cross Axis in CSS

Now let's align the blocks along the cross axis as well. Alignment along this axis is specified by the align-items property. The flex-start value pushes the items to the start of the axis, and the flex-end value pushes them to the end.

Let's try some examples.

Example

Let's direct the main axis from left to right. In this case, the transverse axis will be directed from top to bottom. Let's adjust the placement of our blocks along both the main axis and the transverse axis.

Along the main axis, we will push the blocks to its beginning, that is, to the left edge. To do this, we will set justify-content to flex-start. Along the transverse axis, we will also push the blocks to its beginning, that is, to the top edge. To do this, we will also set align-items to flex-start.

Let's see what we get:

.parent {
	display: flex;
	flex-direction:  row;        /* main axis to the right, transverse down */
	justify-content: flex-start; /* blocks to the beginning of the main axis */
	align-items:     flex-start; /* blocks to the beginning of the transverse axis */
}

Result of code execution:

Example

Now let's push the blocks to the end of the cross axis, that is, to the bottom. To do this, set align-items to flex-end:

.parent {
	display: flex;
	flex-direction:  row;        /* main axis to the right, transverse down */
	justify-content: flex-start; /* blocks to the beginning of the main axis */
	align-items:     flex-end;   /* blocks to the end of the transverse axis */
}

Result of code execution:

Example

Now let's direct the main axis from top to bottom. Since the main axis is vertical, the transverse axis will be directed from right to left. Let's press the blocks along both axes to their origin:

.parent {
	display: flex;
	flex-direction:  column;     /* main axis down, transverse to the right */
	justify-content: flex-start; /* blocks to the beginning of the main axis */
	align-items:     flex-start; /* blocks to the beginning of the transverse axis */
}

Result of code execution:

Example

Now we will press the blocks to its end along the transverse axis:

.parent {
	display: flex;
	flex-direction:  column;     /* main axis down, transverse to the right */
	justify-content: flex-start; /* blocks to the beginning of the main axis */
	align-items:     flex-end;   /* blocks to the end of the transverse axis */
}

Result of code execution:

Example

We press the blocks to the end of both axes:

.parent {
	display: flex;
	flex-direction:  column;   /* main axis down, transverse to the right */
	justify-content: flex-end; /* blocks to the end of the main axis */
	align-items:     flex-end; /* blocks to the end of the transverse axis */
}

Result of code execution:

Example

Let's change the direction of the main axis - let's direct it from bottom to top. In this case, the transverse axis will not change its direction, since the main axis is still vertical.

We press the blocks to the beginning of both axes:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* main axis up, transverse to the right */
	justify-content: flex-start;     /* blocks to the beginning of the main axis */
	align-items:     flex-start;     /* blocks to the beginning of the transverse axis */
}

Result of code execution:

Practical tasks

Repeat the page according to this example: