Hello! Need assessment for Flexbox layout tasks.
I have a question about task four. How to do li’s sizes like on screenshot?
Think about flex-basis: auto forli but how does this value work?
Hello @VladimirK
you doing great well done just some notice:
-
for task 3 you used
text-align: center;which is not required they give the child selector in case if someone wanted to usealign-self: center;instead ofalign-items: center;that you already used. -
for task 4 to achieve the same output use the flex-grow: 1;
-
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 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
hope that help and have a nice day 
2 Likes
Thank you! About task 4, flex-grow is work. I ask myself why flex: 1; is not do the same, and found answer
2 Likes
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 https://developer.mozilla.org/en-US/docs/Web/CSS/flex#values
notice that the intial value is https://developer.mozilla.org/en-US/docs/Web/CSS/flex#formal_definition
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
2 Likes
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