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:
xxxxxxxxxx1
<html>2
<head>3
<style>4
5
div {6
border: 1px solid red;7
}8
9
div.container {10
display: flex;11
flex-wrap: wrap;12
}13
14
div.child {15
margin: 10px;16
padding: 10px;17
flex: 40%;18
}19
20
</style>21
</head>22
<body>23
<div class="container">24
<div class="child">1</div>25
<div class="child">2</div>26
<div class="child">3</div>27
<div class="child">4</div>28
<div class="child">5</div>29
<div class="child">6</div>30
</div>31
</body>32
</html>2 commentsShow commentsAdd comment
2y
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?
2y
@ Michael_Dias, try this solution: https://dirask.com/questions/CSS-How-to-use-flexbox-with-3-elements-per-row-keeping-last-elements-position-pr6Ymp
