How to Make One Flex Item Full-Width in CSS Flexbox? - Coding

CSS Flexbox is a layout module designed to align and distribute space among items in a container, even when their size is unknown or dynamic. To make one flex item full-width, you can use properties like flex-basis or flex-grow to control its size and position. These approaches allow us to ensure that a specific item spans the entire width of the container while maintaining the layout of other items.

Below are the possible approaches:

Table of Content

Using flex-basis with width: 100%
Using flex-grow and order

Using flex-basis with width: 100%

In this approach, we are using the flex-basis property to control the width of flex items. By setting flex: 1 0 40% for standard items, they take up 40% of the container’s width, allowing two items per row. For the full-width item, flex: 1 0 100% makes it span the entire width of the container.

Example: The below example uses flex-basis with width: 100% to Make One Flex Item Full-Width in CSS Flexbox.

HTML

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


<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;
            box-sizing: border-box;
        }

        .full-width {
            flex: 1 0 100%;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using flex-basis with width: 100%</h3>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item full-width">Full Width Item</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>

</html>

Output:

Using flex-grow and order

In this approach, we are using flex-grow and order properties to make one item full-width. The flex: 1 1 100% style on the .full-width class ensures that the item spans the entire width of the container. The order: -1 property places this item at the beginning of the flex container, so it appears as the first item in the layout. Meanwhile, the other items use flex: 1 1 40% to fit two items per row, with margin and box-sizing ensuring proper spacing and sizing.

Example: The below example uses flex-grow and order to Make One Flex Item Full-Width in CSS Flexbox.

HTML

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

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

        h1 {
            color: green;
        }

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

        .item {
            flex: 1 1 40%;
            margin: 10px;
            background-color: lightgreen;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        .full-width {
            flex: 1 1 100%;
            order: -1;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using flex-grow and order</h3>
    <div class="container">
        <div class="item full-width">Full Width Item</div>
        <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:

Reffered: https://www.geeksforgeeks.org

CSS

Related
How to Add Transition on Hover Using CSS?
How to Overlay/Hover Div in Flexbox Container Div?
How to Arrange Two Items Per Row Using Flexbox?
How to Centre a Button with Flexbox?
How to Disable Text Selection in HTML with CSS?

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