vux flexbox使用_使用Flexbox创建垫片

vux flexbox使用

I was one of the biggest fans of flexbox before it hit but, due to being shuffled around at Mozilla, I never had the chance to use it in any practice project; thus, flexbox still seems like a bit of a mystery to me.  This greatly pains me because I feel left out of the flexbox revolution, though these days the sentiment I hear is that flexbox turned out to be a bust and that CSS grid is the new hotness.

在Flexbox出现之前，我曾经是Flexbox的最大粉丝之一，但是由于在Mozilla中被改组，所以我从来没有机会在任何练习项目中使用它。 因此，flexbox在我看来还是个谜。 这让我非常痛苦，因为我感到自己被排除在flexbox革命之外，尽管这些天我听到的感觉是，flexbox变成了泡沫破灭，而CSS网格成为了新的热点。

One awesome utility of flexbox is spacers.  One problem of the past was docking items to the left, items to the right, but needing to mess around with absolute positioning to make it happen.  With flexbox it's easy to accomplish this effect without needing fixed element sizes or JavaScript width calculations.

flexbox的一项强大功能是spacer。 过去的一个问题是将项目停靠在左侧，将项目停靠在右侧，但是需要弄乱绝对位置才能实现。 使用flexbox可以轻松实现此效果，而无需固定元素大小或JavaScript宽度计算。

HTML (The HTML)

Let's assume a very simple structure of a parent, a left and right child, and a spacer:

让我们假设一个非常简单的结构，其中有一个父母，一个左右孩子以及一个垫片：

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

The spacer will be empty.

垫片将为空。

CSS (The CSS)

The CSS will be flexbox-based:

CSS将基于flexbox：

.parent {
  display: flex;
}

.spacer {
  flex-grow: 1;
}

The key is having a parent with display: flex and the spacing having flex-grow: 1.  Regardless of how wide the left and right get, the spacer takes up the remaining space.  If the left and right grow larger than the available space...then things get pushed around.

关键是要有一个display: flex的父项，而其间距为flex-grow: 1 。 不管左右有多宽，垫片都会占用剩余空间。 如果左侧和右侧的大小超出可用空间...那么事情就被推了。

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

请参阅CodePen上的David Walsh( @darkwing )的Pen Flexbox间隔 器 。

Flexbox gets a bad rap -- the layout APIs of old were so bad that a moderate upgrade should still be celebrated.  Regardless, let's celebrate a simple API that allows us to create this sample layout that we've wanted for so long.

Flexbox的说唱不好-旧的布局API太糟糕了，以至于仍然应该庆祝适度的升级。 无论如何，让我们庆祝一个简单的API，该API使我们能够创建我们一直想要的示例布局。

翻译自: https://davidwalsh.name/flexbox-spacer

vux flexbox使用