相关疑难解决方法(0)

假设我们有一个宽度为400px的弹性容器.

在这个容器里面有三个flex项:

:nth-child(1) { flex: 0 2 300px; }   /* flex-grow, flex-shrink, flex-basis */
:nth-child(2) { flex: 0 1 200px; }
:nth-child(3) { flex: 0 2 100px; }

因此,flex项的总宽度为600px,容器中的可用空间为-200px.

在这个问题,本文和flexbox规范的帮助下,我学会了在flex项目中分配负空闲空间的基本公式:

步骤1

将每个收缩值乘以其基础并将它们全部加在一起:

:nth-child(1)  2 * 300 = 600
:nth-child(2)  1 * 200 = 200
:nth-child(3)  2 * 100 = 200

总计= 1000

第2步

将上面的每个项目除以总数来确定收缩因子:

:nth-child(1)  600 / 1000 = .6
:nth-child(2)  200 / 1000 = .2
:nth-child(3)  200 / 1000 = .2 …

我有一个flexbox有两个孩子的人。我希望两个孩子有相同的大小，尽管一个有填充而另一个没有。

这是一个演示。我希望蓝色和绿色框的大小相等：

html, body, .container {
  margin: 0;
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
}

.container div {
  flex: 1;
  min-width: 0;
  flex-basis: 0;
}

.first {
  background: cornflowerblue;
}

.second {
  background: lightgreen;
  padding: 100px;
}

<div class="container">
  <div class="first"> </div>
  <div class="second"> </div>
</div>

我知道我可以使用width: 50%，但这不是方向不可知的，如果我添加更多元素就会中断。