EN
Flexbox 2 elements per row - 100% width of the page when each item have 10px of margin and padding
1
answers
6
points
How to arrange 2 elements per row using flex? Let's say total elements is 6, so we need to have 3 rows with 2 elements per row.
Each element needs to have margin and padding set to 10px.
1 answer
10
points
Solution:
// ONLINE-RUNNER:browser;
<html>
<head>
<style>
div {
border: 1px solid red;
}
div.container {
display: flex;
flex-wrap: wrap;
}
div.child {
margin: 10px;
padding: 10px;
flex: 40%;
}
</style>
</head>
<body>
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
</body>
</html>
2 comments
Add comment
If you have an even number of rows (try adding a new one), then, the last row will take the whole space. How to prevent that?
@ Michael_Dias, try this solution: https://dirask.com/questions/CSS-How-to-use-flexbox-with-3-elements-per-row-keeping-last-elements-position-pr6Ymp