How to Disable Flex in CSS?

Last Updated : 24 Jul, 2024

We use "display flex" property in our CSS code to create a flexible layout. To disable flex in CSS, We can simply set the display property of the particular element to another value like we can set "flex" to "block" or "inline-block" for our needs.

These are the following approaches:

Table of Content

Using "display: block" Property
Using "display: inline-block" Property

Using "display: block" Property

First, create a basic HTML structure then inside the <body> tag, add a div element with the class "container" or you can use any other class also.
Inside the main div create some other divs for showing properly to disable the display flex property.
To disable the display: flex in your code use display: block.

Example: The example code below shows how to disable display flex in CSS using display: block.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Disable Flex Example</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Flexbox Enabled</h1>
    <p>In this section the flexbox is
      <strong>Enabled.</strong></p>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>

    <h1>Flexbox Disabled</h1>
    <p>This section has Flexbox disabled, 
      for that we use <strong>display block.</strong></p>
    <div class="container disable-flex">
        <div class="item">Item A</div>
        <div class="item">Item B</div>
        <div class="item">Item C</div>
    </div>
</body>

</html>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    color: #333;
}

p {
    color: #666;
    font-size: 16px;
    margin-bottom: 20px;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    width: 80%;
    max-width: 800px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.container.disable-flex {
    display: block;
}

.item {
    background-color: #02b72d;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    flex: 1;
    color: #fff;
}

Output:

Screenshot-_532_ — Output : Disable flex using display block

Using "display: inline-block" Property

First, create a basic HTML structure then inside the <body> tag, add a div element with the class "container" or you can use any other class also.
And inside the main div create some other divs for showing properly to disable display flex property.
To disable the display:flex in your code use display : inline-block.

Example: The example code below shows how to disable display flex in CSS using display : inline-block.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Disable Flex Example</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Flexbox Enabled</h1>
    <p>In this section the flexbox is
     <strong>Enabled.</strong></p>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>

    <h1>Flexbox Disabled</h1>
    <p>This section has Flexbox disabled, for
      that we use <strong>display inline-block.</strong></p>
    <div class="container disable-flex">
        <div class="item">Item A</div>
        <div class="item">Item B</div>
        <div class="item">Item C</div>
    </div>
</body>

</html>