Question

我有一个包含三个元素的容器：一个图像和两个div：

我希望所有图像都是内联块，并且已在其类中指定：

 .first_image {
        display: inline-block;
        height: 20px;
        width: 20px;
 }
 .first_div {
        width: 100%;
        display: inline-block;
 }
 .second_div {
        width: 52px !important;
        height: 40px !important;
        display: inline-block;
        background-color: #3798D4;
 }
 .container {
        display: inline-flex;
 }

但是，当我运行和检查时，这些是实际属性：

容器（类输入为.container）

第一张图片

第一格

最后一个div（该类具有.edit_pen_container类，并包含一个按钮）

问题在于1.尽管显示为flex，但仍显示为inline-flex； 2.，3。和4.尽管显示为{{1}，但仍显示为block。 }。我真的不明白为什么会改变。此外，该属性不会被删除，因此似乎没有被覆盖。

顺便说一句，所以您可以理解我的逻辑，inline-block将保留在那里，div 1的宽度为100％，因为它必须占用div的其余部分。当用户将鼠标放在div 1中时，div 2将出现并采用固定宽度（52px），并且div 1将缩小以允许div 2占用其所需的空间。也许我的逻辑是错误的，但这就是我想要做的。

所有HTML元素均已通过javascript添加，因此我没有DOM层次结构可以显示。

Answer 1

关于Stack Overflow，关于flex和inline-flex之间的区别已经有很多讨论。 It is an important read，将有助于此讨论。

基本上，inline-flex意味着容器将是内联的，而flex意味着容器将是块级的。在这两种情况下，这都是关键，the children are flex-items.它们将以某种方式运行，并具有适当的默认值以适合flex模型。在某些方面，您必须使用不同于常规块或内联元素的样式。

有关示例，请参见下面的代码段。

.first_image {
   display: inline-block;
   height: 20px;
   width: 20px;
}
.first_div {
   width: 100%;
   display: inline-block;
}

.first_div_expanding {
  flex: 1;
}
.second_div {
   width: 52px !important;
   height: 40px !important;
   display: inline-block;
   background-color: #3798D4;
}
.container {
    display: inline-flex;
}
.flex-container {
    display: flex;
}

.set-sized-flex-container {
    display: inline-flex;
    width: 75%;
}

<h1>Inline-flex</h1>
<p>The flex container only takes up as much space as it needs and will not force a new line.</p>
<div class='container'>
  <img src="https://via.placeholder.com/20x20" class="first-image">
  <div class="first_div">No expansion</div>
  <div class="second_div"></div>
</div>
<hr>
<h1>Flex</h1>
<p>The flex container will take the full-width of the screen</p>
<div class='flex-container'>
  <img src="https://via.placeholder.com/20x20" class="first-image">
  <div class="first_div">I expand full-width</div>
  <div class="second_div"></div>
</div>
<hr>
<h1>Expanding first_div with Inline-Flex</h1>
<div class='set-sized-flex-container'>
  <img src="https://via.placeholder.com/20x20" class="first-image">
  <div class="first_div_expanding">I expand to take up remaining space</div>
  <div class="second_div"></div>
</div>

Answer 2

您写道：

问题在于1.尽管显示为flex，但应显示为inline-flex； 2.，3和4.应该显示为block，但它们应显示为inline-block {1}} ...而且，该属性没有被删除，因此它似乎没有被覆盖。

所以我们要澄清一下：

元素＃1（.container）是一个伸缩容器。您是说问题在于您声明了display: inline-flex，但是浏览器将元素呈现为display: flex。
元素＃2，＃3和＃4是＃1的流入子元素。这意味着它们是弹性项目。您是说问题在于您已将这些项目设置为display: inline-block，但是浏览器将它们渲染为display: block。

好的。让我们一一介绍这两个要点。

为什么display: inline-flex计算为display: flex？

因为这就是flexbox规范所要求的。

§ 3. Flex Containers: the flex and inline-flex display values

如果指定的元素display为inline-flex，则其元素   在某些情况下，display属性的计算结果为flex：   CSS 2.1 Section 9.7中的表格已修改为包含另一行，其中“ {Specified   值”列和“计算值”列中的inline-flex。

因此，在某些情况下，flex会计算为inline-flex，如上面摘录中链接到的表所述。这就是您的代码中正在发生的事情。从技术上讲，这不是替代，这就是为什么您没有看到flex被淘汰的原因。

为什么inline-flex在弹性商品上计算为display: inline-block？

再次，因为这是flexbox规范所要求的。

§ 4. Flex Items

flex项目的display: block值被阻塞：如果生成flex容器的元素的入流子对象的指定display是内联级别的值，它将计算到其块级等效。

还要注意，您无法控制弹性项目的display值。将元素设为弹性容器后，弹性项目的display属性将由弹性算法控制。浏览器将忽略对弹性项目设置display规则的尝试。这就是您在代码中看到的内容：display被忽略了（但是再次，从技术上讲，它不会被覆盖，这就是为什么display: inline-block未被删除的原因）。

显示类型被未知来源覆盖

2 个答案: