DEV Community

Jen C.
Jen C.

Posted on

1

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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more