弯曲基础和宽度有什么区别？

Question

弯曲基础和宽度有什么区别？这方面有很多问题和文章，但据我所知，并无定论。我能找到的最好的总结是挠曲基允许您在计算其他内容之前指定元素的初始/起始大小。它可以是百分比，也可以是绝对值。.这本身并不能说明元素的行为挠曲基准备好了。以我目前对柔性盒的了解，我不明白为什么不能描述宽度还有。我想知道挠曲基与.不同宽度在实践中：如果我代替宽度带着挠曲基(反之亦然)，视觉上会发生什么变化？如果将两者都设置为不同的值，会发生什么情况？如果它们具有相同的价值，会发生什么？是否有一些特殊情况宽度或挠曲基与使用另一个会有很大的不同吗？如何宽度和挠曲基与其他柔性盒样式一起使用时不同，例如挠性包装, 挠曲生长和挠缩?还有其他重大差异吗？编辑/澄清：这个问题以不同的格式在什么是灵活的属性集？但我感觉到更直接地比较或总结了…的不同之处。挠曲基和宽度(或高度)会很好。

Answer 1

值得重复如下：

Flex-base允许您指定初始/启动在计算任何其他内容之前，元素的大小。它可以是百分比，也可以是绝对值。

重要的是初始.

就其本身而言，这确实决定了宽度/高度。直到另一个挠曲生长/收缩属性发挥作用。

所以。有

.child {
 flex-basis:25%;
 flex-grow:1;}

最初将是25%宽，但随后会立即扩大尽可能多，直到其他元素被考虑在内。如果没有，它将是100%宽/高。

快速演示：

.flex {

  width: 80%;

  margin: 1em auto;

  height: 25px;

  display: flex;

  background: rebeccapurple;

}

.child {

  flex-basis: auto;

  /* default */

  background: plum;

}

.value {

  flex-basis: 25%;

}

.grow {

  flex-grow: 1;

}

<div class="flex">

  <div class="child auto">Some Content</div>

</div>

<div class="flex">

  <div class="child value">Some Content</div>

</div>

<div class="flex">

  <div class="child grow">Some Content</div>

</div>

试验flex-grow, flex-shrink和flex-basis(或者速记)flex :fg fs fb).可能会导致一些有趣的结果。

Answer 2

也许最重要的一点是：

如果浏览器不支持flex？在这种情况下，width/height接管他们的价值观。

这是一个非常好的主意-几乎是必不可少的-来定义width/height元素，即使您有一个完全不同的值flex-basis..记得通过禁用来进行测试display:flex看看你得到了什么。