Assessment wanted for Flexbox skill test- szavala

MDN Learn
#1

Hello!

I completed the Test Your Skills Flexbox assessments 1-4. I would appreciate feedback on my work, linked in the CodePens below:

I had difficulty with the width of the flex items, in Layout 4. I tried experimenting with different values for flex-basis and flex-grow for the <li> elements, but I can’t seem to get these flex items to match the image.

Thank you!

#2

Hello @s-zavala

you doing great well done just a little notice here

1)for task 2 you did not share the bonus part

Additional questions:

    Can you now make the first item twice the size of the other items?
  1. i guess there some typo in step 3 related to the child selector
.child {
  1 100px;
}

not sure what you meant here
child given in this task in case if the user want to solve it using

  align-self: center;

instead of

  align-items: center;

as you already did

  1. for step 4 you just missed to copy the body selector
    if you check the start point code
    you missed to copy that
   body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 1em;
            margin: 0;
        }

by the way you can make it more simple by only use those atterbuite


ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  flex-grow: 1;
}

as there some default value for example flex-direction: row; is row by default https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

i guess you tried to set all those maybe cause it was not working as i should be

when thing does not work try to use the developer tool on your browser to check the value of element and how it react when you change something

hope that help and have a nice day :slight_smile:

2 Likes
#3

Thank you for all the help!

I will try to use the developer tool in future CSS projects to debug when I am confused.

These are the revisions I made:

Thank again :grin:

1 Like
#4

you very welcome @s-zavala

well done :partying_face:

thanks for the my css comment it helped to know which is the part of your work and which from the start point

by the way it would be better in your future post to put a link to the topic or task also so it be faster for everyone to get to it

you welcome and have a nice day :slight_smile:

2 Likes