Assement needed for Flex Layout Four

I think I have the basic layout set up but the containers do not seem to be properly lined up with each other. I’ve tried adding padding but i doesn’t have much affect on lining everything up. Any pointers/tips would be appreciated.

@ajordan690 you are on the right track, but you are missing a specific value of the flex (or flex-basis) property set on the <li>s, which sizes all of them according to the content size, rather than a specific size of the elements themselves.

This one stumped me for a bit. Chris’s hint, plus reviewing the different flex terms and playing around finally led to a solution.

Within ul {}, you’ll certainly want display: flex; to get you started. Obviously, they aren’t wrapping at this point, so throw in a flex-wrap: wrap;.

The next part was tricky, I guess I didn’t realize that the li {} block would react to the display: flex; declaration that is up in ul {}. It does!–I think this is because li {}'s are child elements of ul.

Anyway, within li {}, trying playing with the different values available for flex-grow.

1 Like