Languages

Flexbox 2 elements per row - 100% width of the page when each item have 10px of margin and padding

3 points
Asked by:
Marcin
19340

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
7 points
Answered by:
Marcin
19340

Solution:

// ONLINE-RUNNER:browser;

<html>
<head>
    <style>

        div {
            border: 1px solid red;
        }

        div.container {
            display: flex;
            flex-wrap: wrap;
        }

        div.child {
            flex: 40%;
            margin: 10px;
            padding: 10px;
        }

    </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>

 

0 comments Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join