How to Disable Equal Width Columns in CSS Flexbox?

Last Updated : 01 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

With CSS Flexbox, developers can easily create complex and responsive layouts due to its powerful layout module. Its capacity to create equal-height columns inside flex containers is one of its features. There are situations, though, in which you might want to turn this behavior off and allow the height of each column to be determined by its content. In order to achieve non-equal height columns in CSS Flexbox, this article looks at several methods.

These are the following approaches to disable equal height columns in CSS Flexbox:

Table of Content

Using the align-items Property

A flex container's align-items property allows you to adjust how items line up along the cross-axis. By choosing flex-start, you can allow items to have different heights by ensuring that they are aligned at the beginning of the container.

Syntax:

.container {
  display: flex;
  align-items: flex-start;
}

Example: This demonstrates the use of the 'align-items' property within a flexbox container, aligning the child items.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1 {
        color: green;
    }

    .container {
        display: flex;
        align-items: flex-start;
    }

    .item {
        padding: 10px;
        border: 1px solid #ccc;
    }
</style>

<body>
    <h1>GeeksForGeeks</h1>
    <h3>Using the align-items Property</h3>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2 with more content</div>
        <div class="item">Item 3</div>
    </div>
</body>

</html>

Output:

Using the align-self property on individual items

The align-self property allows you to override the align-items property for individual flex items. By setting align-self: flex-start on specific items, you can disable equal heights for those items.

Syntax:

.container {
  display: flex;
}

.item {
  align-self: flex-start;
}

Example: This demonstrates the use of the 'align-self' property to align the second '.item:nth-child(2)' to the start of the flexbox container.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1 {
        color: green;
    }

    .container {
        display: flex;
    }

    .item {
        padding: 10px;
        border: 1px solid #ccc;
    }

    .item:nth-child(2) {
        align-self: flex-start;
    }
</style>

<body>
    <h1>GeeksForGeeks</h1>
    <h3> Using the align-self Property on Individual Items</h3>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2 with more content</div>
        <div class="item">Item 3</div>
    </div>

</body>

</html>

Output:


Next Article
How to Disable Equal Width Columns in CSS Flexbox?

H
heysaiyad
Improve
Article Tags :

Similar Reads