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

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看看你得到了什么。