Flexbox Before It Was Flex

The 2009 flexbox draft used display: box with box-orient and box-flex, a whole different syntax from the display: flex that replaced it.

In 2026: Partly alive. Blink and WebKit still honour the prefixed display: -webkit-box, which is why -webkit-line-clamp works, so the row below still lays out. The unprefixed display: box and box-flex are dead, and Firefox no longer supports -moz-box for web content. The modern spelling is display: flex.

Where it came from: CSS Flexible Box Layout, 2009 W3C working draft. Chris Coyier covered the old display: box syntax on CSS-Tricks before the 2012 rewrite. MDN ↗

<style>
/* The 2009 flexbox draft: display: box, not flex */
.oldflex {
  display: -webkit-box;   /* still honoured by Blink and WebKit */
  display: box;           /* the unprefixed 2009 word, dead */
  -webkit-box-orient: horizontal;
  box-orient: horizontal;
}
.oldflex > div { -webkit-box-flex: 1; box-flex: 1; padding: 6px; }
</style>

<div class="oldflex">
  <div style="background:#cde">box-flex 1</div>
  <div style="background:#dec">box-flex 1</div>
  <div style="background:#edc">box-flex 1</div>
</div>