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.