Aligning Flex Items Along the Main Axis in CSS

The justify-content property allows you to align elements along the main axis. Previously, you've already covered the center, space-between, space-around, space-evenly values. Let's explore a few more values now.

The value flex-start pushes elements towards the start of the main axis, while the value flex-end pushes elements towards the end. Let's look at some examples.

Example

Let's direct the main axis from left to right by setting the flex-direction property to row. Let's push the blocks to the start of the axis. To do this, set justify-content to flex-start:

.parent {
	display: flex;
	flex-direction: row; /* main axis from left to right */
	justify-content: flex-start; /* blocks to the beginning of the main axis */
}

Result of code execution:

Example

Now let's push the blocks to the end of the axis. To do this, set justify-content to flex-end:

.parent {
	display: flex;
	flex-direction: row; /* main axis from left to right */
	justify-content: flex-end; /* blocks to the end of the main axis */
}

Result of code execution:

Example

Now let's direct the main axis from right to left by setting the flex-direction property to row-reverse. Let's push the blocks to the beginning of the axis, that is, to the right edge. To do this, set justify-content to flex-start:

.parent {
	display: flex;
	flex-direction: row-reverse; /* main axis right to left */
	justify-content: flex-start; /* blocks to the beginning of the main axis */
}

Result of code execution:

Example

Now let's push the blocks to the end of the main axis, that is, to the left edge. To do this, set justify-content to flex-end:

.parent {
	display: flex;
	flex-direction: row-reverse; /* main axis right to left */
	justify-content: flex-end; /* blocks to the end of the main axis */
}

Result of code execution:

Example

In the previous examples, the main axis was directed horizontally. Let's now turn it over and direct it vertically.

Let's direct the main axis downwards by setting the flex-direction property to column.

Let's push the blocks to the start of the main axis, that is, to the top edge. To do this, set justify-content to flex-start:

.parent {
	display: flex;
	flex-direction: column; /* main axis top to bottom */
	justify-content: flex-start; /* blocks to the beginning of the main axis */
}

Result of code execution:

Example

Now let's push the blocks to the end of the main axis, that is, to the bottom edge. To do this, set justify-content to flex-end:

.parent {
	display: flex;
	flex-direction: column; /* main axis top to bottom */
	justify-content: flex-end; /* blocks to the end of the main axis */
}

Result of code execution:

Example

Let's flip the main axis, directing it from bottom to top. To do this, set the flex-direction property to column-reverse. In this case, the blocks will change their order - the last block in the HTML code will be at the beginning of the axis.

Let's push the blocks to the start of the main axis, that is, to the bottom edge. To do this, set justify-content to flex-start:

.parent {
	display: flex;
	flex-direction: column-reverse; /* main axis from bottom to top */
	justify-content: flex-start; /* blocks to the beginning of the main axis */
}

Result of code execution:

Example

Let's push the blocks to the end of the main axis, that is, to the top edge. To do this, set justify-content to flex-end:

.parent {
	display: flex;
	flex-direction: column-reverse; /* main axis from bottom to top */
	justify-content: flex-end; /* blocks to the end of the main axis */
}

Result of code execution:

Practical tasks

Repeat the page according to this example: