In this post, you’ll learn the basics of CSS Flexbox, which has become a must-have skill for web developers and designers in the last couple of yea...
For further actions, you may consider blocking this person and/or reporting abuse
When you demonstrate making the search item take up more space, you set it to
flex: 1, which is the same as it is already (from.container > div). What should it be instead? I've tried putting in higher numbers but don't know what to use to get it to appear like in your screenshot.I also think it would be helpful if in your initial HTML example you included the classes you refer to later.
Hi Ben,
I believe in the example of making the .search take up remaining space, you just need to turn off the .container > div styling so that flex: 1; only applies to .search and not all divs within .container.
Hope this helps/makes sense!:-)
Many thanks, Jack.
You have to replace the rule that came before it. So delete
.container > divand target the search item with a class name. Also it might be worth considering that you won't see much of a difference on smaller screen sizes or with narrower flex containers.I put together a visual explanation on Codepen to try and help to explain things and give working demos for you to see the effect in action.
Hope this helps!
Your style of writing and presenting the tutorial is amazing. Please write more tutorials like this.
this was crystal clear and easy to understand... thank you for this!
Nice job!