Creating Spacers with Flexbox

在flexbox问世之前，我是它最大的粉丝之一，但由于在Mozilla被调动，我从未有机会在任何实践项目中使用它；因此，flexbox对我来说仍然是一个谜。这让我非常痛苦，因为我觉得自己被排除在flexbox革命之外，尽管这些天我听到的情绪是flexbox最终失败了，CSS网格是新的热点。

flexbox的一个很棒的实用程序是间隔器。过去的一个问题是将项目停靠在左边，项目停靠在右边，但需要通过绝对定位来实现。使用flexbox可以很容易地实现这种效果，而无需固定的元素大小或JavaScript宽度计算。

The HTML

让我们假设一个非常简单的结构，包括一个父对象、一个左右子对象和一个间隔符：

<span class="parent">
  <span class="left-buttons"></span>
  <span class="spacer"></span>
  <span class="right-buttons"></span>
</span>

垫片将是空的。

The CSS

CSS将基于flexbox：

.parent {
  display: flex;
}

.spacer {
  flex-grow: 1;
}

关键是有一个＜code＞display:flex＜/code＞的父项，而＜code＞flex growt:1＜/code>的间距。无论左右两边有多宽，间隔符都会占用剩余空间。如果左右两边的空间比可用空间大。。。然后事情就被推来推去。

See the Pen Flexbox Spacers by David Walsh (@darkwing) on CodePen.