DEV Community

Jen C.
Jen C.

Posted on

CSS - display: flex vs inline-flex

inline-flex

A child container with display: inline-flex does not automatically fill the parent container. Its size depends on its content and any additional styles applied to it.

flex

A child container with display: flex automatically fills the parent container's width because flex behaves like a block-level element, which expands to fit the parent's available width by default.

Example

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <h1>inline-flex</h1>
    <div class="container">
      <div class="inline-flex-c">
        <div class="child">child 1</div>
        <div class="child">child 2</div>
      </div>
    </div>

    <h1>flex</h1>
    <div class="container">
      <div class="flex-c">
        <div class="child">child 1</div>
        <div class="child">child 2</div>
      </div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS

body {
  background: transparent;
  color: #fcbe24;
  padding: 0 24px;
  margin: 0;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.container {
  background-color: white;
  color: black;
}

.inline-flex-c {
  display: inline-flex;
  background-color: palevioletred;
 }

.flex-c {
  display: flex;
  background-color: chocolate;
}

.child{
  border-color: greenyellow;
  border-style: solid;
}
Enter fullscreen mode Exit fullscreen mode

Result

The flex container stretches to occupy the full width of its parent container. In contrast, the inline-flex container only occupies the width required by its content.

Image description

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay