Hey @chrisdavidmills,
I was solving flexbox skill test one-and I am stuck at the last question.
could you please guide me on the same?
Link:
https://codepen.io/kan_coder/pen/PoZqdjw
Topic Link:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills
and please look at the previous topic post too.
Good Day…!!
@Coder_In_Progress hi there!
So on flexbox question 4, you’ve worked out that you need to set the <ul>
to be a flex container. You need to do two other things:
- Set the wrapping of the flex items so that they wrap when the edge of the container is reached, instead of shooting past it. try searching for “flex wrap”
- Set the
flex
of each item so that they will take up as much space as is available to them on the row. They will grow and shrink as required, and not adopt any specific sizing. You can do this with one simple keyword.
If you are still stuck, then let me know, and I’ll give you the answer.
Hey,@chrisdavidmills thank you for your guidance. I have worked upon those questions.
Kindly go through it…and let me know if I am still making some mistakes.
1.Flexbox
2.Positioning
Take Care…!!
@Coder_In_Progress really great progress here! These are looking pretty much perfect, just a couple of comments.
- For flexbox 3, you could also do it like this (not wrong, just different, worth considering):
.parent {
display: flex;
justify-content: center;
align-items: center;
}
- For flexbox 4, it looks fine, but this is probably more flexible (althought yours is not really wrong):
li {
flex: auto;
}
and the positioning assessments are looking perfect too! You probably don’t need the following in positioning 2:
.container {
width: 500px;
height: 400px;
}
But it is fine.