如何使用display：flex？制作带有一些文本的半部分布局？

Question

我想做半个布局。所以我创建了一个<div> display: flex;，并且有两个孩子flex-grow: 1;。它看起来像我的预期，半个布局。但是当我在其中一个孩子身上放一些文字时，孩子比另一个孩子大。

我无法理解为什么这样的工作会这样。 http://codepen.io/anon/pen/rOvpPM

请告诉我原因以及如何解决。

Answer 1

Flexbox以这种方式工作。如果您在弹性框中有两个元素（或任意数量的元素），并为它们提供相同的flex-grow，那么它们将“增长”相同的数量。

如果你有一个宽度为300px的父Flex容器，有两个孩子;一个宽度为0px，另一个宽度为100px，两者都会增加100px，产生100px和200px div。

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

即可

width: 50%;

并删除

flex-grow: 1;

来自CSS。

希望这有帮助

Answer 2

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

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

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

如果你只是使用速记属性

.half {
  flex: 1;
}

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