Как сбросить свойство "display" для flex-item

Я пытаюсь преобразовать старый макет на основе таблиц и JS в новый Flexbox с обратной совместимостью, сохраняя таблицы для старых браузеров (в частности, IE8, IE9 и Opera 10+).

проблема в том, что нет display:flex-item чтобы переопределить старый стиль display:table-cell.

Я пробовал различные определения, как display:inherit, display:initial но никто не сможет сбросить дисплей для правильной работы в качестве гибкого элемента.

<!-- HTML user list -->
<div class="userDetails layout">
    <div class="picture"><img src="..."></div>
    <div class="details">username, email, etc.</div>
</div>

/* CSS Table Layout */
.layout { display: table; width: 100%; }
.layout > .picture { display: table-cell; width: 30%; }
.layout > .details { display: table-cell; width: auto; }

/* CSS Flexbox - ignored by browsers that does not support it */
/* just an example - should use all versions for best compatibility */
.layout { display: flex; }
.layout > .picture { display: ???; flex: 0 1 30%; }
.layout > .details { display: ???; flex: 1 1 auto; }

все, что я установил в дисплее для .details он не работает как flex-item и не растут чтобы заполнить оставшееся пространство.

любая идея, как переопределить это без использования JS для обнаружения версии браузера и переключения стилей?

Я пробовал googling для решения, но большинство результатов - это только общие статьи о Flexbox; только подобное этот тест что просто не решает обратную совместимость.

обновление 1: Это демо JSFiddle чисто Flexbox и Flexbox совмещенных с планом таблицы. При изменении размера окна результатов чистый макет сжимается иначе, чем нижний, объединяющий таблицу и Flexbox. Примечание: В Chrome это работает правильно, попробуйте в Firefox, IE, Safari и т. д.

обновление 2: Safari работает правильно с префиксными определениями... обновлено jsfiddle demo

9
css css3 flexbox tablelayout

3 ответов

как упоминал Данилд, все дети контейнера flex (обозначенного display: flex или display: inline-flex) автоматически сделаны детали гибкого трубопровода. Нет display свойство для элемента flex; вместо этого вы устанавливаете его в какое-то другое значение в зависимости от того, как вы хотите детей элемента flex быть выложенным. Если браузеры распознают display: flex-item, тогда у них, вероятно, есть какая-то странная нестандартная реализация "flexbox", потому что это значение никогда не существовало ни в одном воплощении Спецификация Flexbox (и я понятия не имею, чему именно это соответствовало бы, если бы это было так).

начальное значение display и inline, так что display: initial эквивалентно display: inline. См.ответ. То, что вы пытаетесь сделать, это сбросить элементы на все, что по умолчанию display, как указано браузерами. Вам нужно будет знать это значение заранее; для div элементов display: block.

к сожалению, это отменить существующий table-cell заявление в все браузеры, по понятным причинам. В этом случае вы можете просто придерживаться макета таблицы, если он уже работает для вас, если вам нужно поддерживать браузеры, которые не поддерживают flexbox.

5

нет display:flex-item потому что как только вы установите display:flex на элементе контейнера дети автоматически сгибают элементы.

здесь демо показать, что display:table-cell на детей не влияет функциональность свойств flex на детей

Edit: для Firefox и IE, если вы добавите правило display:flex после display:table-cell правило тогда display:table-cell на детях не влияет на функциональность свойства flex для детей 

/* flex layout with display:table falllback */

.layout {
  display: table; /* falllback */
  width: 100%; /* falllback */
  display: flex;
}

.layout > .picture {
  display: table-cell; /* falllback */
  width: 30%; /* falllback */
  display:flex; /* to make FF and IE happy */
  flex: 0 1 30%;
  background: tomato;
}

.layout > .details {
  display: table-cell; /* falllback */
  width: auto; /* falllback */
  display:flex; /* to make FF and IE happy */
  flex: 1 1 auto;
  background: aqua;
}
<div class="layout">
  <div class="picture">
    <img src="...">
  </div>
  <div class="details">username, email, etc.</div>
</div>
4
.child {
  flex-shrink: 0;
}

добавить свойство flex-shrink, чтобы предотвратить сжатие больше, чем его содержимое

1