DEV Community

Jen C.
Jen C.

Posted on

CSS - display: flex vs inline-flex

#webdev #css #frontend #web

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

Top comments (1)

Collapse
 
ali-aboulsauood profile image
Ali Aboul-Sauood •

Thanks!

Just make sure to strip away irrelevant code (such as the entire HTML markup outside the body element, and the CSS styles not applied to the flex containers and their children), and use syntax highlighting if possible.

Also consider embedding live examples created in CodePen