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

我最近一直在玩

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>

请注意运行时的宽度

---

你的问题有点不清楚，但如李斯特先生所说：

如果

display:flex

尊重宽度，那么

display:inline

不尊重宽度？如果是，答案是肯定的

这是因为，根据

柔性项的绘制与内联块完全相同

---

你的问题有点不清楚，但正如李斯特先生所说：

如果

display:flex

尊重宽度，那么

display:inline

不尊重宽度？如果是，答案是肯定的

这是因为，根据

柔性项的绘制与内联块完全相同

因此受宽度语句的影响。

您使用的是

元素。默认情况下，它们是内联的。内联元素的

宽度将自动忽略

但是，在第一个
div
部分（
.box
）中，
span
的inline
display
值被父级的
display:flex
覆盖，它建立了一个。因此，所有子项都成为弹性项，它们考虑
宽度
和
高度


flex项为其内容建立新的格式上下文。这个
此格式化上下文的类型由其
显示值决定，
像往常一样。但是，弹性项目本身是弹性级别的框，而不是
块级别框：它们参与容器的flex
格式化上下文，而不是在块格式化上下文中

资料来源：


在第二个
div
部分（
.box2
）中，
span
元素保留为
display:inline
，因为它们不会从中删除，并且任何
宽度和
高度分配都会被忽略

尝试显示：内联块
：

参考资料：






您正在使用
元素。默认情况下，它们是内联的。内联元素的
宽度将自动忽略

但是，在第一个
div
部分（
.box
）中，
span
的inline
display
值被父级的
display:flex
覆盖，它建立了一个。因此，所有子项都成为弹性项，它们考虑
宽度
和
高度


flex项为其内容建立新的格式上下文。这个
此格式化上下文的类型由其
显示值决定，
像往常一样。但是，弹性项目本身是弹性级别的框，而不是
块级别框：它们参与容器的flex
格式化上下文，而不是在块格式化上下文中

资料来源：


在第二个
div
部分（
.box2
）中，
span
元素保留为
display:inline
，因为它们不会从中删除，并且任何
宽度和
高度分配都会被忽略

尝试显示：内联块
：

参考资料：






问题到底是什么？如果
display:flex
尊重
width
，其中
display:inline
没有？如果是的话，答案是肯定的，但那不是很清楚。@Lister先生，你是对的，我没有补充关于这个问题的主要问题。当我不得不发布这篇文章时，我很着急。我在您的笔中编辑了
.box2 span{display:inline block}
，它们之间的空格在中进行了解释。在您的问题中，您没有这个选项，因此它们具有默认的
display:inline
，因此它们忽略
宽度，如中所述。你的问题是这些问题中的一个，没有问题。但是如果你想的话，你可以把它骗了。好的问题到底是什么？如果
display:flex
尊重
width
，其中
display:inline
没有？如果是的话，答案是肯定的，但那不是很清楚。@Lister先生，你是对的，我没有补充关于这个问题的主要问题。当我不得不发布这篇文章时，我很着急。我在您的笔中编辑了
.box2 span{display:inline block}
，它们之间的空格在中进行了解释。在您的问题中，您没有这个选项，因此它们具有默认的
display:inline
，因此它们忽略
宽度，如中所述。你的问题是这些问题中的一个，没有问题。但是如果你想的话，你可以把它骗了。当然，链接引用（除了
内联块
比较）的酷之处在于，它突出了一些可能不常见的东西：flex项目可以使用
z顺序
，而无需定位。这很有趣。考虑到z-排序有时可能是一种拯救，但定位可能会导致更多的调整我在发帖时很匆忙，所以我编辑了这个问题。但我的问题主要是关于如何处理宽度，更重要的是，边距从何而来？链接引用的酷之处（除了
内联块
比较）它强调了一些可能不常见的东西：flex项目可以使用
z-order
，而无需定位。这很有趣。考虑到z-排序有时可能是一种拯救，但定位可能会导致更多的调整我在发帖时很匆忙，所以我编辑了这个问题。但我的问题主要是关于如何处理宽度，更重要的是，利润从哪里来
.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;
}