CodePen Embed - Mozilla Hacks two-value Display: two value flex values

<h1>Two values for display</h1>

<div class="flex flex1">
  <div>Item One</div>
  <div>Item Two</div>
  <div>Item Three</div>
</div>

<p>The first example is a block element with flex children.</p>

<div class="flex flex2">
  <div>Item One</div>
  <div>Item Two</div>
  <div>Item Three</div>
</div>

The second example is an inline element with flex children.

.flex {
  border: 5px solid #ccc;
  gap: 10px;
}

.flex > * {
  background-color: #333;
  color: #fff;
}

.flex1 {
  display: block flex;
}

.flex2 {
  display: inline-flex;
}

body {
  padding: 1em;
  font: 1.2em/1.4 Arial, Helvetica, sans-serif;
}

This Pen is owned by Rachel Andrew on CodePen.

See more by @rachelandrew on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.