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

Question

Я пытаюсь преобразовать старый макет на основе таблиц и 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-элемент и не расти, чтобы заполнить оставшееся пространство.

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

Я пробовал искать решение, но большинство результатов - это просто общие статьи о Flexbox; только аналогичный - this test, который просто не решает обратную совместимость.

ОБНОВЛЕНИЕ 1: Это JSFiddle demo чистого Flexbox и Flexbox в сочетании с табличной планировкой. Если вы измените размер окна результатов, чистый макет будет сжиматься иначе, чем нижний, который объединяет таблицу и Flexbox. Примечание: в Chrome это работает правильно, попробуйте его в Firefox, IE, Safari и т.д.

UPDATE 2: Safari корректно работает с префиксами определениями ... updated JSFiddle demo

Answer 1

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

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

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

Answer 2

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

Вот a demo, чтобы показать, что display:table-cell на детях не влияет на функциональность гибких свойств на детях

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

/* 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>

Answer 3

.child { 
    flex-shrink: 0; 
} 

добавить Flex-термоусадочные свойства для предотвращения усадки больше, чем его содержание