Типы отображения переопределяются неизвестным источником

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;
 }

Однако, когда я запускаю и проверяю, это фактические атрибуты:

1. Контейнер (ввод регистра класса .container)

Первое изображение

Первый div

Последний div (этот класс .edit_pen_container и содержит кнопку)

Проблема в том, что 1. отображаеткак flex, хотя должны быть inline-flex, 2., 3. и 4. отображаются как block, хотя они должны быть inline-block.Я действительно не понимаю, почему это меняется.Кроме того, свойство не вычеркнуто, поэтому оно не переопределяется.

Кстати, чтобы вы могли понять мою логику, img останется там, div 1 имеет ширину 100%, потому что он должен занять оставшуюся часть div.Когда пользователь помещает мышь в элемент div 1, появляется элемент div 2, который принимает фиксированную ширину (52 пикселя), а элемент div 1 сжимается, чтобы элемент div 2 занимал необходимое ему пространство.Может быть, моя логика неверна, но это то, что я хочу сделать.

Все элементы HTML были добавлены через javascript, поэтому у меня нет отображаемой иерархии DOM.

Answer 1

Вы писали:

Проблема в том, что 1. отображается как flex, хотя должно быть inline-flex, 2., 3. и 4. отображается как block хотя они должны быть inline-block ... Кроме того, свойство не зачеркнуто, поэтому оно не переопределяется.

Итак, давайте уточним:

• Элемент # 1 (.container) представляет собой гибкий контейнер.Вы говорите, проблема в том, что вы объявили display: inline-flex, но браузер отображает элемент как display: flex.

• Элементы # 2, # 3 и # 4 являютсядети # 1.Это означает, что они являются гибкими предметами.Вы говорите, проблема в том, что вы установили эти элементы на display: inline-block, но браузер отображает их как display: block.

---

Хорошо.Давайте рассмотрим эти два пункта один за другим.

Почему display: inline-flex вычисляет до display: flex?

Потому что это то, что требуется спецификации flexbox.

§ 3. Контейнеры Flex: отображаемые значения flex и inline-flex

Если указанный элемент display равен inline-flex, тогда его свойство display при определенных обстоятельствах вычисляется в flex: таблица в CSS 2.1 Раздел 9.7 изменена, чтобы содержать дополнительную строку, с inline-flex в столбце «Заданное значение»и flex в столбце «Вычисленное значение».

Таким образом, inline-flex вычисляет до flex в определенных ситуациях, как описано в таблице, приведенной в приведенной выше выдержке.Это то, что происходит в вашем коде.Технически, это не переопределение, поэтому вы не видите, что inline-flex вычеркнуто.

---

Почему display: inline-block вычисляет до display: block для гибких элементов?

Опять же, потому что этого требует спецификация flexbox.

§ 4. Элементы Flex

display значение гибкого элемента блокируется: если указанное display дочернего элемента в потоке элемента, генерирующего гибкий контейнер, является значением встроенного уровня, оно вычисляется в его эквиваленте на уровне блока.

Также обратите внимание, что вы не можете контролировать значение display гибких элементов.После того, как вы сделаете элемент гибким контейнером, свойство display в элементах flex управляется алгоритмом flex.Попытки установить правило display для элементов flex игнорируются браузером.Вот что вы видите в своем коде: display: inline-block игнорируется (но, опять же, технически не переопределяется, поэтому inline-block не вычеркнуто).

Answer 2

Уже много обсуждается вопрос переполнения стека о разнице между flex и inline-flex. Это важное чтение , которое поможет в этом обсуждении.

По сути, inline-flex означает, что контейнер будет встроенным, тогда как flex означает, что контейнер будет на уровне блока.Вот ключ, в обоих случаях дочерние элементы flex-items. Они будут вести себя определенным образом с определенными значениями по умолчанию, чтобы соответствовать гибкой модели.Вы должны оформить их иначе, чем обычные блочные или встроенные элементы.

См. Пример ниже.

.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>