为什么在 flexbox 中宽度处理方式不同？

Question

我最近一直在玩display:flex，因为我发现它变得越来越流行。在快速测试中，使用 flex 和非 flex CSS 方法，我意识到，在使用 flex 时，我的宽度和边距总是受到尊重。考虑到无论如何我很可能需要元素之间的排水沟，这是一个好方法吗？此外，跨度之间的边距从何而来？这就是我的意思：

HTML

<div class="container">
  <div class="box">
    <span class="inner-box">This gives me a 30px X 60px</span>
    <span class="inner-box">This gives me a 30px X 60px</span>
    <span class="inner-box">This gives me a 30px X 60px</span>
  </div>  
  <div class="box2">
    <span class="inner-box">This gives me a width larger than the specified 30px</span>
    <span class="inner-box">This gives me a width larger than the specified 30px</span>
    <span class="inner-box">This gives me a width larger than the specified 30px</span>
  </div>  
</div>

CSS

.box{
  background: orange;
  display:flex;
  flex-direction:row-reverse;
  padding:0 10px;
}

.box2{
  background: green;
  text-align:right;
  padding:0 10px;
}

.inner-box{
  width:30px;
  background:#fff;
  margin:0 0px;
}

在运行时注意宽度

DEMO

Answer 1

您正在使用<span> 元素。默认情况下它们是内联的。对于内联元素，width 会自动被忽略。

然而，在第一个 div 部分 (.box) 中，span 的内联 display 值被父级的 display: flex 覆盖，从而建立了一个 flex formatting context。因此，所有子项都成为弹性项目，它们尊重 width 和 height。

Flex Items

弹性项目为其内容建立一个新的格式化上下文。这 此格式化上下文的类型由其display 值确定， 照常。然而，弹性项目本身是 flex-level 盒子，而不是 块级盒子：它们参与容器的弹性 格式化上下文，而不是块格式化上下文。

^{来源：https://drafts.csswg.org/css-flexbox-1/#flex-items}

---

在第二个 div 部分 (.box2) 中，span 元素仍然是 display: inline，因为它们不会从 block-formatting context 中删除，并且任何 width 和 height 分配都将被忽略。

试试display: inline-block：http://codepen.io/anon/pen/yeggOy

参考资料：

• Setting the width of inline elements
• How to set width of a inline element?
• Does height and width not apply to span?
• Inline Elements With Width

Answer 2

你的问题有点不清楚，但如果像 MrLister 评论的那样：

如果display:flex 尊重宽度，那么display:inline 没有？如果是这样，答案是肯定的，。

这是因为，根据spec，

Flex 项目的绘制与内联块完全相同

因此受到宽度语句的影响。