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.