This community-built FAQ covers the “flex-direction” exercise from the lesson “Flexbox”.
Paths and Courses
This exercise can be found in the following Codecademy content:
Web Development
FAQs on the exercise flex-direction
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply (
) below!
Agree with a comment or answer? Like (
) to up-vote the contribution!
Need broader help or resources? Head here.
Looking for motivation to keep learning? Join our wider discussions.
Learn more about how to use this guide.
Found a bug? Report it!
Have a question about your account or billing? Reach out to our customer support team!
None of the above? Find out where to ask other questions here!
Why does Flex-Direction: Row and Flex-Direction: Row-Reverse in this exercise not center the items when align-items: center; is set for the .container?
Flex-Direction: Column and Flex-Direction: Column-Reverse both do…
align-items: center; simply centers flex items on the cross-axis of their flex container. By default, the cross-axis is the vertical axis. However, this can be changed using the flex-direction property. By default, flex-direction is set to row, however, it can also have the following value:
row-reversecolumncolumn-reverse
row-reverse acts exactly like row. The only difference is that the flex items will be positioned from right to left and from the top right corner of their parent container. However, the cross-axis is still the vertical axis and because their flex container had a height that was computed by its content, we couldn’t actually center them vertically
1 Like
Why don’t the boxes in the column divs stretch horizontally in the last activity as well?
Because the width is limited to 100px in the .box container, the boxes wont stretch horizontally.
If you want it to stretch, set the width value to 100%
.box {
background-color: whitesmoke;
border: 1px solid white;
width: 100px;
height: 100px;
flex-grow: 1;
}
1 Like
Ah okay that makes sense, thank you!
1 Like
flex-grow only works on the main axis. When flex-direction is set to column or column-reverse, the main axis is the vertical axis. Because the container is too small to allow the boxes to grow vertically, they do not grow.
You should be able to set the boxes to stretch horizontally if you remove the align-items property from .container
2 Likes
How so does flex-grow affect justify-content: space-around? I noticed when flex-grow is set, there happen to be no visual effect of justify-content: space-around.
1 Like
Why does the container shrink when we change it’s height property to max-height in step 5?
I don’t think the boxes will be able to stretch horizontally even if you take off the align-items property.
- This is because flex-grow only takes effect if the main-axis can expand.
- But for our case, our main axis had been changed to be the vertical axis with the help of the flex-direction property, and when you expand the view, only the horizontal axis expands and not the vertical axis which in our case has become the main axis.
- Our main axis (vertical axis) is not expanding and hence we don’t see the effect of flex-grow on our main axis since it’s not expanding.
How does max-height affects flex-direction and why does flex-grow acts on horizontal items?
