Does align-content override the vertical/horizontal margins on flex items?

Question

Does align-content override the vertical/horizontal margins on flex items?

Answer

No, just like justify-content, align-content will respect margins!

1 Like

For this exercise on the 6th section where it tells us to replace height with min-height, I couldn’t tell what the difference was or what the result was. Can anyone describe it to me? Thanks!

2 Likes

In ‘Stretch’ section blue rectangles change to take up all the vertical space. Before the change they were 75px height.
The behavior changed because ‘align-content’ is set to ‘stretch’ by default, but we see flexbox items stretching only when a minimum height or no height is specified.

18 Likes

Because we don’t have an explicit height value after we introduce min-height the items stretch to fill the box (apart from the bottom right corner)

Why they don’t shrink /wrap as well?

1 Like

stretch value stretchs the contents vertically, is there any value to stretch them horizontally so we change to min-width?

One important thing to note is that the align-items property can still be useful when flex items wrap to the next line. Instead of align-items aligning flex items on the y-axis of their flex container, they will be aligned on the y-axis of their row

align-items: flex-start:
image

align-items: flex-end:
image

2 Likes

If we set Display property value to other then flex, we can use justify-content and other related flex properties we learn in this chapter ?

1 Like

No. These are flexbox properties, therefore, they cannot be used on elements that aren’t flex containers

1 Like

since the main axis is the horizontal axis, using flex-grow should accomplish this

1 Like

The stretch content filled the space with the three boxes, i.e. the boxes grew.

1 Like

This link is not working. anyone else facing the issue?

Also, can justify-content be ignored, and can we directly;y use justify-content? Even if there are multiple rows of flex.

Yes, you’re right about the link. That seems to be a potential problem with the routing. We should report it (I also found it on another course).

What do you mean? Would it be fine to ask you to rephrase your question a bit?

Sorry, I meant to ask what instead of align-items, can we use align-content? Would align-items work on single row of elements.

1 Like

No problem. I think you’ll find this thread very helpful with that regard.

The difference between align-items and align-content.

First, let’s look at the behavior of objects inside the container with align-content:


(The red line is just for clarity).
Objects seem to be simply attracted to the central axis of the container.

Now, let’s look at the behavior of objects inside the container with align-items:

Here you can see that the objects are centered relative to each other in each row.

And now let’s apply both properties at once!

align6

Here, when the container has enough width, there are no differences from the case when we just used align-items: center;
But when we shrink the space, the objects align relative to each other in each row and are attracted to the central axis of the container.

I hope this helped you figure out the difference between align-items and align-content.

1 Like