How to Arrange Two Items Per Row Using Flexbox? - Coding

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:

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:

Output

Reffered: https://www.geeksforgeeks.org

CSS

Related
How to Centre a Button with Flexbox?
How to Disable Text Selection in HTML with CSS?
How to Disable Flex in CSS?
How to Build Animated Cursor Neon using HTML, CSS and JavaScript?
How To Use Inline Styles in ReactJS?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	23