Practical Frontend
Flexbox

Main Axis Alignment

In Flexbox, justify-content is a property that controls the alignment of items along the main axis. The main axis is defined by the flex-direction property, and the justify-content property determines how items are positioned within the main axis.

There are several possible values for the justify-content property, including:

  • flex-start: Items are aligned to the start of the main axis. This is the default value.
  • center: Items are centered along the main axis.
  • flex-end: Items are aligned to the end of the main axis.
  • space-between: Places items with space distributed evenly around the start and end of the list.
  • space-around: Items are evenly distributed along the main axis, with equal amounts of space around each item.
  • space-evenly: Spaces items such that they have equal amounts of space before and after them.

By using the justify-content property, you can control the alignment of items within a Flexbox container, making it easier to create flexible and responsive layouts. After all items have been calculated in size, the remaining space in the main axis of the container (either width or height, depending on the flex-direction) will be divided amongst the items using a specific algorithm controlled by the value of justify-content.

1
2
3
flex-direction
row
justify-content
flex-start

To better understand how flex-direction and justify-content work, experiment with changing their values. You can also adjust the width of the container by dragging the marker on the right side of the example.

In this example, all the flexbox items are represented as solid rectangles with names inside. Each rectangle is an example of a flexbox item. The margins of the items are represented by low opacity rectangles that show the size of the margin in numbers.

20

1

40

20

400

40

Alongside the items, there are stripe rectangles, which represent the spaces where flexbox will automatically add to the container. The space is labeled with a number indicating the size in the main axis.

400

space

400

When you change the value of justify-content, flexbox will calculate the remaining space in the main axis and distribute it to the flex items based on the chosen value. The space could be put on the left, or on the right, or on both side of each item.

40

1

100

40

1

100

Let’s examine how the algorithm works with each value of justify-content.

1. flex-start

The default setting for justify-content is flex-start, which aligns items to the beginning of the main axis.

1
2
3
flex-direction
row

2. flex-end

However, if you change the value of justify-content to flex-end, the elements will be aligned to the end of the main axis.

1
2
3
flex-direction
row

3. center

With justify-content set to center, items are positioned in the center along the main axis of the flex container. This value is often used when we want to center the elements within the container, both horizontally and vertically.

1
2
3
flex-direction
row

4. space-between

With justify-content set to space-between, the items in the flex container are evenly spaced out along the main axis with equal space between each item, as well as between the first and last item and the start and end of the main axis

1
2
3
flex-direction
row

5. space-around

When you set justify-content to space-around, it evenly distributes the items along the main axis, with equal amounts of space around each item. This means that there is an equal amount of space before the first item and after the last item, as well as between each adjacent item. This creates a visually balanced layout, with items spaced evenly apart.

1
2
3
flex-direction
row

6. space-evenly

1
2
3
flex-direction
row

7. The special case of margin

In the previous sections, we looked at how the justify-content property affects the distribution of remaining space in a flex container without considering the effect of margins on this distribution. In this section, we will examine the impact of margins on the distribution of remaining space in a flex container.

It’s crucial to keep in mind that in flexbox, margins between items inside a flex container do not overlap. This means that the margin of each item will be respected and kept separate.

To show this, let’s consider a flex container that has a vertical arrangement of items, also known as a column flex direction. If the first item has a bottom margin of 40px and the second item has a top margin of 30px, we can avoid margin collapse by setting the gap between items to 0. As a result, we can see that the two margins are kept separate.

1
2
3

Furthermore, flexbox handles margin: auto differently. When an item within a flex container has margin: auto assigned to it, CSS will divide the remaining main size space equally among the margin: auto values. For instance, if the first and second items have margin-left: auto, the remaining space will be divided into two parts.

1
2
3

If all three items have margin: auto, the remaining space will be divided into six parts.

1
2
3
justify-content
flex-start

It’s important to remember that margins are prioritized for distribution before any other elements. This means that if any of the flex items have margin: auto, the justify-content property often has no effect on the layout of the container.

Let’s experiment with changing the value of justify-content in the above example to see how the layout remains the same even when we make these changes.

In this case, the value of justify-content will have no effect on the layout of the container. This is because the remaining space is already distributed among the margins, leaving no space for other items.

In this lesson, we have already learned how CSS distributes leftover space between the main size of the container and the size of the items based on the margin and justify-content properties.

This raises some new questions:

  • How does CSS handle leftover space in the cross size?
  • Since the leftover space is dependent on the size of the items, which CSS properties will affect the size of the items?

We will deep dive into these questions in next lessons. Let joy me to learn about this part. I am very exiciting to guide you into this journey.

Let’s continue to explore and learn about these questions. Together, we will expand our knowledge of how CSS handles left over space in cross size and how the size of items is affected by different properties. Get ready for an exciting journey ahead!

Previous2.1. Changing DirectionNext2.3. Cross Axis Aligment