Assessment wanted for Flexbox layout tasks

Hello! Need assessment for Flexbox layout tasks.

I have a question about task four. How to do li's sizes like on screenshot? image

Think about flex-basis: auto forli but how does this value work?

Hello @VladimirK

you doing great well done just some notice:

  1. for task 3 you used text-align: center; which is not required they give the child selector in case if someone wanted to use align-self: center; instead of align-items: center; that you already used.

  2. for task 4 to achieve the same output use the flex-grow: 1;

  3. the flex-basis set the initial size based on which value you give using auto mean it will be based on content check the note about the content value here

hope that help and have a nice day :slight_smile:


Thank you! About task 4, flex-grow is work. I ask myself why flex: 1; is not do the same, and found answer


What different between flex: auto and flex-basis: auto? flex: auto works, but flex-basis: auto is not.

you very welcome

flex:auto is equal to flex: 1 1 auto so it already has flex-grow set to 1
check this

notice that the intial value is
which mean it flex: 0 1 auto
if you used only flex-basis:auto then it has flex-grow : 0

when you check the mdn for any css attribute or value pay attention to the default and initial value and also check if it inherit by default or not cause some time when it inherit that mean it will not apply the default/initial value

hope that help and have a nice day :slight_smile:


One more question about task 3. I use text-align for centered text in .child element (not element). Without this value i have:

It’s not matched task’s screenshot, but it is more prettily i think)

oh sorry then i miss understand you and sure it better with your way :slight_smile: