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:
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!
Flex-Direction: Row and
Flex-Direction: Row-Reverse in this exercise not center the items when
align-items: center; is set for the
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-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
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%
border: 1px solid white;
Ah okay that makes sense, thank you!
flex-grow only works on the main axis. When
flex-direction is set to
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
How so does
justify-content: space-around? I noticed when
flex-grow is set, there happen to be no visual effect of
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.