Menu
My idea is to give an adaptive div width. When I have just one item, the width should be the same as the item within the container div.
Any suggestion on how to do this?
#container { display: flex; flex-direction: row; flex-wrap: wrap; max-width: 200px; padding: 10px; margin: 20px; background-color: blue; } #container .item { width: 80px; height: 50px; background-color: red; margin: 10px; }<div id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div id="container"> <div class="item"></div> </div>
811
You have to add a wrapper around the right column, and then only specify flex-basis on the . menu element. Now when the menu is hidden, the right column expands the full amount. Great, that works as expected!
When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100% , and enable wrap on the container. The item now consumes all available space.
The CSS flex-wrap property is used to specify whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property allows enabling the control direction in which lines are stacked. It is used to designate a single line or multi-line format to flex items inside the flex container.
You can use display: inline-flex
#container { display: inline-flex; flex-direction: row; flex-wrap: wrap; max-width: 200px; padding: 10px; margin: 20px; background-color: blue; } #container .item { width: 80px; height: 50px; background-color: red; margin: 10px; }<div id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div id="container"> <div class="item"></div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
