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

Posted 2023-03-06

【中文标题】为啥在 flexbox 中宽度处理方式不同？

【英文标题】：Why is width handled differently in flexbox?为什么在 flexbox 中宽度处理方式不同？

【发布时间】：2016-04-06 16:04:18

【问题描述】：

我最近一直在玩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

【问题讨论】：

到底是什么问题？如果display:flex 尊敬width，那么display:inline 哪里不行？如果是这样，答案是肯定的，但不是很清楚。

@MrLister，你是对的，我错过了添加我对此的主要问题。当我不得不发布这个时，我很着急。我编辑了

在你的笔中你有.box2 span display: inline-block ，它们之间的空间在How to remove the space between inline-block elements?中解释。在你的问题中你没有那个，所以他们有默认的display: inline，所以他们忽略了width，如Setting the width of inline elements中所述。您的问题是其中之一的欺骗。

没有欺骗。但如果你愿意，你可以欺骗它。没关系

【参考方案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

【讨论】：

这是一个非常详细的答案。我一直在寻找这样的东西来澄清差异，但在这里成为魔鬼的拥护者。我尝试了 display:inline-block 虽然它尊重宽度，但它溢出了文本并仍然添加了边距，不像 display flex

您看到的空白是inline-block 元素的自然特征。这是explanation。使用一种（几种）方法来删除空格，这是您的revised demo。

字体大小：0 !!!!!!谁会想到字体与此有关？现在，这是一个非常有趣的概念！

【参考方案2】：

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

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

这是因为，根据spec，

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

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

【讨论】：

你的链接引用很酷的一点（除了inline-block的比较）是它突出了一些可能不为人所知的东西：弹性项目可以使用z-order而不用定位。

这很有趣。考虑到 z-ordering 有时可能是一种拯救，但定位可能会导致更多的调整

我发帖的时候很着急，所以我编辑了这个问题。但主要是我的问题是关于如何处理宽度，更重要的是，边距来自哪里？