Help wanted FlexBox Layout skill test 4

MDN Learn
#1

Hi All,
I need help to complete my flexbox test your skills. I am stuck with Flex Layout Four. My code at Codepen here

#2

Hello @Chima_Iwunze
you doing great well done here what you missing https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

hope that help and have a nice day

#3

Thanks Justsomeone for your response. if you have a look at their page, they wanted a result like This

#4

you very welcome and that link has the missing attribute you need to use to achieve that :wink:

#5

Hi Justsomeone,
I really can’t understand how they achieved 3 rows only; also how they made 4 cols in the the first row and 3 cols in the rows 2 & 3. That is the odd I’m trying to get over with

#6

hello @Chima_Iwunze

if you add flex-grow:1; to the list item
and here how it work it first check the width or height (the depend on the flex-direction which is row in our case here) of the flex container if you check the ul you would see it has width:450px;
then it start to put the li items one by one then it check if there enough space to add the next item to the same row or not
each item width depend on the item content and if there any margin and padding
once there no enough space it check does all the items on the row fill the whole width or not if yes then it go to the second row and repeat the same steps but if there still some spaces it check the grow if it is 1 for all item as in our case it will add extra spaces equally for all items

notice that you can give some items grow 1 and other grow 2 and so on so items that has grow 2 would get the double space that the grow 1 has

by the way it would better when you reply to a comment to click the replay under the user comment not the post replay button so he/she get notified
and to mention someone write @ then it will show you list of names to choose from

hope that help and let me know if i should explain it in much better way and have a nice day :slight_smile:

2 Likes
#7

Hi @justsomeone,
Thanks so much for the explanation about flex-grow. I added flex-grow: 1 to the list item it produced the same 4 rows. I then increased the ul width: 550px, and it worked. The explanation about width and flex-grow is amazing.

2 Likes
#8

you very welcome and glad to help :slight_smile: