相关疑难解决方法(0)

有关于此的问题和文章,但据我所知,没有任何结论.我能找到的最好的总结是

flex-basis允许您在计算任何其他内容之前指定元素的初始/起始大小.它可以是百分比或绝对值.

...这本身并没有说明基于柔性基组的元素的行为.根据我目前对flexbox的了解,我不明白为什么它也无法描述宽度.

我想知道flex-basis与实际宽度的不同之处:

• 如果我用flex-basis替换宽度(反之亦然),那么会在视觉上改变什么？
• 如果我将两者设置为不同的值会发生什么？如果它们具有相同的值会发生什么？
• 是否存在一些特殊情况,使用宽度或柔性基础与使用另一个有明显区别？
• 如何宽度和柔性基础上与其他Flexbox的风格,如配合使用时,不同的柔性包装,柔性成长和弹性收缩？
• 还有其他重大差异吗？

编辑/澄清:这个问题已经以不同的格式询问了什么是flex-basis属性集？但我觉得更直接的比较或总结柔性基础和宽度(或高度)的差异将是不错的.

据我了解，flex-basis负责确定元素的大小。

在下面的示例中，我尝试将所有框的大小均等地设置为100px。仅使用flex-basis无法达到效果。

.each_box {
  -webkit-flex-grow: 0;
  -webkit-flex-shrink: 0;
  -webkit-flex-basis: 100px;

  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100px;

  background-color: yellow;
  height: 50px;

  border: 1px solid black;

}

在这里Plnkr： http