带显示的 Span 元素：inline-flex 的高度比同级 Span 更大

Question

在使用 Flex 容器时，我注意到 Chrome 和 Firefox 的渲染高度都比静态同级容器高 1px。

这是代码：

.container {
  background-color: yellow;
  border: 1px solid red;
}
.main {
  border: 1px solid black;
}
.flex-cont {
  display: inline-flex;
}

<div class="container">
  <span class="main flex-cont">
    		This is the flex container, height is 20px
    	</span>
  <span class="main">
    		This is not the flex container, height is 19px
    	</span>
</div>

在这里小提琴： http: //jsfiddle.net/pzoxfs90/

有谁知道这是为什么以及如何避免它？

Answer 1

默认情况下，您的span元素是内联级元素。

该属性的初始值为vertical-align，适用于内联级元素baseline。这允许浏览器在元素下方提供一些空间来容纳下行元素。

当您应用display: inline-flex到其中一个跨度时，您就建立了一个Flex 格式化上下文。在这种情况下，子元素是块化的，这意味着行为更像是块级元素。

因此，该vertical-align属性不再适用于 span1，但它继续适用于 span2，这就是您仍然看到下行空间的原因。

从规范来看（指的是包裹文本的匿名框，并且是弹性项目）：

4. 弹性项目

Flex 项目的值是块化的：如果生成 Flex 容器的元素的流入子元素的display指定 是内联级值，则它将计算为其块级等效项。display

最简单的解决方案是使父级成为 Flex 容器，默认情况下，它使子元素保持内联，并允许您在两者上设置 Flex 属性。

.container {
    display: flex;
    background-color: yellow;
    border: 1px solid red;
}

.main {
    border: 1px solid black;
}

<div class="container">
    <span class="main">This is the flex container, height is 20px</span>
    <span class="main">This is not the flex container, height is 19px</span>
</div>

修订版小提琴

更多细节：

• 如果父子高度相同，为什么会有垂直滚动条？
• 在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？

Answer 2

似乎是一个display:inline;问题，更改它以display:inline-block;修复高度差。虽然不确定这有多大用处......

body {
  margin: 30px;
}	

.container {
  background-color: yellow;
  border: 1px solid red;
}

.main {
  border: 1px solid black;
  display:inline-block;    
}

.flex-cont {
  display: inline-flex;
}

<div class="container">
	<span class="main flex-cont">
		This is the flex container, height is 20px
	</span>
	<span class="main">
		This is not the flex container, height is 20px
	</span>
</div>