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

[aubsrey]

Question

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

Answer

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

[jnijnijni]

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!

[betamaster84619]

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.

[robgit28]

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)

[albert8bfish]

Why they don’t shrink /wrap as well?

[mega7531304075]

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

[samyadel]

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:

align-items: flex-end:

[hobab]

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 ?

[samyadel]

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

[codedcolt]

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

[gearidoceallachin]

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

[gouravgv1]

FAQ: Flexbox - Align-content

[Community%20FAQs%20on%20Codecademy%20Exercises] This community-built FAQ covers the “Align-content” exercise from the lesson “Flexbox”. Paths and Courses This exercise can be found in the following Codecademy content: Web Development FAQs on the exercise Align-content Does align-content override the vertical/horizontal margins on flex items? Join the Discussion. Help a fellow learner on their journey. Ask or answer a question about this exercise by clicking reply ([reply]) below! …

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.

[elnicomapero82885031]

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).

@gourav_gv

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

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

[gouravgv1]

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

[elnicomapero82885031]

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

[basmong]

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!

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.