为什么宽度在 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

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

如果 display:flex 尊重宽度，而 display:inline 不尊重宽度？如果是，答案是肯定的，.

这是因为，根据 spec，

Flex items paint exactly the same as inline blocks

等等受宽度语句的影响。

Answer 2

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

但是，在第一个 div 部分 (.box) 中，span 的内联 display 值被 parent 的值覆盖display: flex，它建立了一个flex formatting context。因此，所有 children 成为弹性项目，尊重 width 和 height.

Flex Items

A flex item establishes a new formatting context for its contents. The type of this formatting context is determined by its display value, as usual. However, flex items themselves are flex-level boxes, not block-level boxes: they participate in their container’s flex formatting context, not in a block formatting context.

^{source: 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

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

Why is width handled differently in flexbox?

html

css

flexbox