How to Make Flexbox Items of Same Size Using CSS?

Last Updated : 19 Nov, 2024

To make Flexbox items the same size using CSS, you can use various properties to control the dimensions of the items and ensure consistency in layout. By default, Flexbox items can have different sizes based on their content, but with a few CSS changes, you can make them uniform.

1. Using Flex Property

The container div, namedflex-containerinside it, creates three divs for three items. Style the flex-container by using border, display: flex, and sets width and height. Use the flex: 1 andheight: 90% properties on Flexbox items within a container and ensure each item takes up an equal share of available space.

HTML

<div class="main">
    <h1>GeeksForGeeks</h1>
    <h2> Using Flex Property for
        same size of Flexbox items
    </h2>
    <div class="flex-container">
        <div class="flex-item">
            Item 1
        </div>
        <div class="flex-item">
            Item 2
        </div>
        <div class="flex-item align-right">
            Item 3
        </div>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main {
    width: 80%;
    height: 50%;
    margin: 0 auto;
}

h1 {
    text-align: center;
    font-size: 40px;
    color: green;
}

h2 {
    text-align: center;
    color: rgb(55, 0, 255);
}

.flex-container {
    border: 5px solid rgb(55, 139, 22);
    width: 100%;
    height: 75%;
    align-items: center;
    display: flex;
}

.flex-item {
    flex: 1;
    height: 90%;
    text-align: center;
    background-color: rgb(184, 233, 181);
    border: 1px solid #ccc;
    margin: 5px 10px;
}

Output

2. Using Width Property

The container div, named flex-containerinside it, creates, three div for three items. Style the flex-container by using border, display: flex and sets width and height. Use the width:30% and height: 90% properties on Flexbox items within a container and ensure each item has equal same.

HTML

<div class="main">
    <h1>GeeksForGeeks</h1>
    <h2> Flexbox items the same
        size using Width Property
    </h2>
    <div class="flex-container">
        <div class="flex-item">
            Item 1
        </div>
        <div class="flex-item">
            Item 2
        </div>
        <div class="flex-item align-right">
            Item 3
        </div>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main {
    width: 80%;
    height: 50%;
    margin: 0 auto;
}

h1 {
    text-align: center;
    font-size: 40px;
    color: green;
}

h2 {
    text-align: center;
    color: rgb(55, 0, 255);
}

.flex-container {
    border: 2px solid red;
    width: 100%;
    height: 80%;
    align-items: center;
    display: flex;
    align-self: center;
    justify-content: center;
}

.flex-item {
    width: 30%;
    height: 90%;
    text-align: center;
    background-color: rgb(248, 123, 242);
    border: 1px solid #ccc;
    margin: 5px 10px;
}

Output

using-width-property — Make Flexbox Items The Same Size Using CSS

3. Using calc() Property

The container div, namedflex-container createsinside it, create three divs, for three items. Style the flex-containerby using border, display: flex, and sets width and height. Use thecalc(100%/3) (divide no. of items) and height:90% properties on Flexbox items within a container and ensure each item takes up an equal share of available space.

HTML

<div class="main">
    <h1>GeeksForGeeks</h1>
    <h2> Flexbox items the same
        size by calc() property
    </h2>
    <div class="flex-container">
        <div class="flex-item">
            Item 1
        </div>
        <div class="flex-item">
            Item 2
        </div>
        <div class="flex-item align-right">
            Item 3
        </div>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main {
    width: 80%;
    height: 50%;
    margin: 0 auto;
}

h1 {
    text-align: center;
    font-size: 40px;
    color: green;
}

h2 {
    text-align: center;
    color: rgb(55, 0, 255);
}

.flex-container {
    border: 2px solid red;
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 5px;
}

.flex-item {
    width: calc(100%/3);
    height: 90%;
    text-align: center;
    background-color: rgb(6, 173, 56);
    border: 1px solid #ccc;
    margin: 5px 10px;
}

Output

using-calc — Make Flexbox Items The Same Size Using CSS

4. Using Grid Property

The container div, named grid-containerinside it, createsthree divs for three items. Style the grid-container by using border, display: flex, and sets width and height. CSS Grid properties, such as grid-template-columns: repeat(3, 1fr), ensure consistent sizing of each grid item.

HTML

<div class="main">
    <h1>GeeksForGeeks</h1>
    <h2>Equal Size Items
        using Grid Property
    </h2>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
    </div>
</div>