我如何使用display：flex制作一些文本的一半布局？

Question

我想进行一半的布局。所以我做了一个有<div>那个的display: flex;并放了两个有这个的孩子flex-grow: 1;。看起来像我预期的那样，一半的布局。但是，当我在一个孩子中放东西时，它变得比另一个更大。

我不太明白为什么它会这样工作。 http://codepen.io/anon/pen/rOvpPM

您能否告诉我原因以及适用的CSS？

Answer 1

正如 Gust 已经提到的，初始宽度也很重要。如果没有指定，则按内容计算。这就是所谓的弹性基础。

所以你需要定义flex-basis，例如：

.half {
  flex-basis: 100px;
  flex-grow: 1;
}

如果您只使用简写属性

.half {
  flex: 1;
}

它还会将 flex-basis 设置为 0，因此空间会均匀分开。获取更多信息的一个很好的来源是css-tricks.com。

Answer 2

Flexbox以这种方式工作。如果在flex-box中有两个元素（或任意数量的元素），并赋予它们相同的值flex-grow，它们将全部“增长”相同的数量。

如果您有一个宽度为300px的父级flex容器，并且有两个子级；一个宽度为0像素，另一个宽度为100像素，两者都将另外增加100像素，从而导致100像素和200像素的div。

如果您希望它们均为宽度的50％，只需添加

width: 50%;

并删除

flex-grow: 1;

从CSS。

希望这可以帮助