Menu
Imagine I have following markup
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> and style
.item { width: 100% } and due to certain reasons I can't change the width of the .item Can I arrange 2 items in each row by styling parent container .container, using flexbox or any other way?
433
For 3 items per row, add on the flex items: flex-basis: 33.333333% You can also use the flex 's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333% .
Here's another way without using calc() . // 4 PER ROW // 100 divided by 4 is 25. Let's use 21% for width, and the remainder 4% for left & right margins... . child { margin: 0 2% 0 2%; width: 21%; } // 3 PER ROW // 100 divided by 3 is 33.3333...
Justify Content Flex Start positions element at the start of the page. Flex End sets the element to the end of the page. Space Around arranges the items evenly but with spaces between them. The spaces will be equal among all the elements inside a flex-box container, but not outside them.
You can give flex: 50% to children divs without touching .item
.item { width: 100% } .container { display: flex; flex-wrap: wrap; } .container > div { flex: 50%; /* or - flex: 0 50% - or - flex-basis: 50% - */ /*demo*/ box-shadow: 0 0 0 1px black; margin-bottom: 10px; }<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>The below solution worked for me
.parent{ display: flex; flex-wrap: wrap; } .child{ width: 25%; box-sizing: border-box; } Sample: https://codepen.io/capynet/pen/WOPBBm
40
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
