Setting Fixed Width for Items in CSS Flexbox

To set a fixed width for items in CSS flexbox, we will be understanding two different approaches. It is useful when you want some specific items to have a fixed width even if there is space available.

In this article, we are having three div items wrapped inside a div container. Our task is to set fixed width for items in CSS flexbox.

Approaches to Set Fixed Width for Items in CSS Flexbox

Here is a list of approaches for setting a fixed width for items in CSS flexbox which we will be discussing in this article with stepwise explaination and complete example codes.

Setting Fixed Width using flex-basis Property

In this approach for setting a fixed width for items in CSS flexbox, we have used flex-basis property along with flex-grow and flex-shrink property. We can also use CSS flex property which is a shorthand property for all the three property we have used.

  • We have used container class to make the container a flexbox container.
  • To design the flex items, we have set it's background-color and text color property, set padding and margin for distance between the boxes and centered the text using CSS text-align property.
  • For setting fixed width of items, we have used "flex-basis: 200px;" specifying the fixed width of flex items along with flex-shrink and flex-grow which doesn't allow flex items to shrink and expand it's width respectively.

Example

Here is a complete example code implementing above mentioned steps for setting a fixed width for items in CSS flexbox using CSS flex-basis property.

Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            display: flex;
        }
        .items {
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: 200px;
            padding: 20px;
            background-color: #071952;
            color: white;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>
        Setting a Fixed Width for Items in CSS Flexbox
    </h3>
    <p>
        In this example, we have used CSS <strong>flex-
        basis</strong> property to set a fixed width for  
        items in CSS flexbox.
    </p>
    <div class="container">
        <div class="items">Item 1</div>
        <div class="items">Item 2</div>
        <div class="items">Item 3</div>
    </div>
</body>
</html>

Setting Fixed Width using min-width Property

In this approach for setting a fixed width for items in CSS flexbox, we have used CSS min-width property. It sets the minimum width of the element.

  • We have used same approach as approach first to make a flex container and to design the flex items.
  • Then, we have used "min-width: 200px;" property which set it's minimum width setting a fixed width of the flex item.

Example

Here is a complete example code implementing above mentioned steps for setting a fixed width for items in CSS flexbox using CSS min-width property.

Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
        }
        .items {
            min-width: 200px;
            padding: 20px;
            background-color: #071952;
            color: white;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>
        Setting a Fixed Width for Items in CSS Flexbox
    </h3>
    <p>
        In this example, we have used CSS <strong>min-
        width</strong> property to set a fixed width for  
        items in CSS flexbox.
    </p>
    <div class="container">
        <div class="items">Item 1</div>
        <div class="items">Item 2</div>
        <div class="items">Item 3</div>
    </div>
</body>
</html>

Conclusion

In this article, we understood how to set a fixed width for items in CSS flexbox. We have used two methods which are: by using flex-basis with flex-grow and flex-shrink or simply using flex shorthand property and by using CSS min-width property.

Updated on: 2024-10-04T17:14:38+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements