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

Last Updated : 11 Jan, 2025

Here are the methods to make a single flex item take up the full width in CSS Flexbox:

1. Using flex: 1 1 100% and order

By setting flex: 1 1 100% on the desired item, it will occupy the full width of the container. The order property can be used to position this item within the flex container.

HTML

<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .item {
            flex: 1 1 30%;
            margin: 10px;
            background-color: lightgreen;
            text-align: center;
            padding: 20px;
        }
        .full-width {
            flex: 1 1 100%;
            order: -1; 
        }
    </style>
</head>
<body>
    <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>

The .container is a flex container with wrapping enabled.
Each .item is set to occupy 30% of the container's width, allowing multiple items per row.
The .full-width class sets flex: 1 1 100%, making this item span the entire width of the container. The order: -1 property moves this item to the beginning of the flex container.

2. Using flex-basis: 100%

Setting flex-basis: 100% on the desired item ensures it takes up the full width of the container.

HTML

<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .item {
            flex: 1 1 30%;
            margin: 10px;
            background-color: lightblue;
            text-align: center;
            padding: 20px;
        }
        .full-width {
            flex-basis: 100%;
        }
    </style>
</head>
<body>
    <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>

The .container is a flex container with wrapping enabled.
Each .item is set to occupy 30% of the container's width.
The .full-width class sets flex-basis: 100%, causing this item to span the full width of the container.

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

Can I make multiple flex items full-width within the same container?

Yes, by setting flex: 1 1 100% or flex-basis: 100% on multiple items, each can occupy the full width, typically stacking vertically.

How does order affect the positioning of flex items?

The order property changes the visual order of flex items. Items with lower order values appear earlier in the layout, allowing you to position full-width items as needed.

Is it necessary to use flex-wrap when making an item full-width?

Yes, enabling flex-wrap allows items to wrap onto new lines, which is essential when combining full-width and standard-width items in the same container.

What is the difference between using flex: 1 1 100% and flex-basis: 100%?

flex: 1 1 100% is a shorthand for setting flex-grow, flex-shrink, and flex-basis, allowing the item to grow and shrink as needed. flex-basis: 100% sets the initial size of the item but doesn't define its ability to grow or shrink.

How can I ensure consistent spacing between flex items?

Using margins on flex items provides consistent spacing. Additionally, properties like gap can be used on the flex container to control spacing between items.

How to Make Flex Items Overlap with CSS Flexbox?

gauravggeeksforgeeks

Improve

Article Tags :