How to Remove Display Flex in CSS?

Last Updated : 24 Jul, 2024

We use "display flex" property in our CSS code to create a flexible layout. To remove display 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 to remove display flex in CSS:

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 remove the display flex property.
To remove the display: flex in your code use display: block.

Example: The example code below shows how to remove 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>Display Block Example</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="element">Item 1</div>
        <div class="element">Item 2</div>
        <div class="element">Item 3</div>
    </div>
</body>

</html>

CSS

.container {
    background-color: #f0f0f0;
    padding: 20px;
    width: 35vw;
    margin-left: 25rem;
    margin-top: 10rem;
}

.element {
    background-color: #4CAF50;
    color: white;
    margin: 10px 0;
    padding: 20px;
    display: block;
    /* It is helps to remove display: flex */
}

Output:

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 remove display flex property.
To remove the display:flex in your code use display: inline-block.

Example: The example code below shows how to remove 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>Display Inline-Block Example</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="element">Item 1</div>
        <div class="element">Item 2</div>
        <div class="element">Item 3</div>
    </div>
</body>

</html>

CSS

.container {
    background-color: #f0f0f0;
    padding: 20px;
    width: 35vw;
    margin-left: 25rem;
    margin-top: 10rem;
}

.element {
    background-color: #2196F3;
    color: white;
    margin: 10px;
    padding: 20px;
    display: inline-block;
    /* It is helps to remove display: flex */
}

Output:

Master JavaScript with our full Javascript - Beginner to Advanced online course! From basics to advanced techniques, build interactive websites and earn a certification. Take the Three 90 Challenge—complete 90% in 90 days for a 90% refund. Start now and unlock your JavaScript potential!