How to Arrange Two Items Per Row Using Flexbox?

Last Updated : 29 Jul, 2024

Flexbox in CSS is a powerful layout module that allows you to easily design complex layouts. It provides an efficient way to distribute space among items in a container, even when their sizes are unknown or dynamic.

Below are the approaches to Arrange Two Items Per Row Using Flexbox:

Table of Content

Using flex-basis
Using width and flex-wrap

Using flex-basis

In this approach, we are using the flex-basis property to specify the initial size of the flex items. Each item has flex: 1 0 40%, meaning it will initially take up 40% of the container's width, allowing for two items per row when combined with the margin.

Example: The below example uses flex-basis to Arrange 2 items per row using flexbox.

HTML

<!DOCTYPE html>

<head>
    <title>Flexbox Example 1</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        h1 {
            color: green;
        }

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

        .item {
            flex: 1 0 40%;
            margin: 10px;
            background-color: lightblue;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using flex-basis</h3>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>

</html>

Output:

Screenshot-2024-07-27-at-17-25-53-Flexbox-Example-1 — Output

Using width and flex-wrap

In this approach, we are using the width property combined with flex-wrap to arrange items in two per row. Each item has a width of calc(50% - 20px), which ensures they take up approximately half of the container's width while accounting for margins. The flex-wrap: wrap property allows items to move to the next line when the container's width is exceeded. The box-sizing: border-box makes sure the padding and border are included in the width calculation, preventing overflow.

Example: The below example uses width and flex-wrap to Arrange 2 items per row using flexbox.

HTML

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>

<head>
    <title>Flexbox Example 2</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        h1 {
            color: green;
        }

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

        .item {
            width: calc(50% - 20px);
            margin: 10px;
            background-color: lightgreen;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using width and flex-wrap</h3>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>

</html>

</html>

Output:

Screenshot-2024-07-27-at-17-31-12-Flexbox-Example — Output

How to Align One Item to the Right using CSS Flexbox ?

gauravggeeksforgeeks

Improve

Article Tags :

How to Arrange Two Items Per Row Using Flexbox?

Using flex-basis

Using width and flex-wrap

Similar Reads

Thank You!

What kind of Experience do you want to share?