Comment faire pour réinitialiser "display" de la propriété pour le flex-élément

Je suis en train de convertir les anciens de mise en page basée sur des tables et JS à la nouvelle Flexbox avec compatibilité descendante en gardant les tables pour les vieux navigateurs (plus précisément IE8, IE9 et Opera 10+).

Le problème est qu'il n'y a pas de display:flex-item pour remplacer l'ancien style de display:table-cell.

J'ai essayé diverses définitions comme display:inherit, display:initial mais aucun n'est en mesure de réinitialiser l'affichage de la définition de travailler correctement flex-élément.

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

Ce que j'ai mis dans l'affichage de la .details il ne fonctionne pas comme flex-élément et ne grandir pour remplir l'espace restant.

Aucune idée comment faire pour remplacer ce sans utiliser de JS pour détecter la version du navigateur et de basculer les styles?

J'ai essayé de googler pour solution mais la plupart des résultats sont en général des articles sur Flexbox; seulement semblable est ce test qui ne suffit pas pour résoudre l'arrière compatility.

Mise à JOUR 1:
C'est un JSFiddle démo d'une pure Flexbox et Flexbox combiné avec la disposition de table. Si vous redimensionnez la fenêtre de résultat, de la pure mise en page se rétrécit de façon différente que le fond, qui combinent du tableau et Flexbox.
Remarque: dans Chrome cela fonctionne correctement, essayez-le dans Firefox, IE, Safari, etc.

Mise à JOUR 2:
Safari fonctionne correctement avec le préfixe définitions... mise à jour JSFiddle démo

OriginalL'auteur Radek Pech | 2014-11-26

  1. 5

    Comme Danield a mentionné, tous les enfants d'un conteneur flex (désigné par display: flex ou display: inline-flex) sont automatiquement mises à flex éléments. Il n'y a pas de display propriété pour un flex point; au lieu de cela, vous le réglez à une autre valeur en fonction de comment vous voulez que les enfants de la flexion de l'élément de à être aménagé. Si les navigateurs sont reconnaissant display: flex-item, puis ils ont probablement un peu bizarre non-standard de mise en œuvre de "flexbox", parce que la valeur n'a jamais existé dans toute l'incarnation de la Flexbox spec (et je n'ai aucune idée exactement il pourrait correspondre si c'était le cas).

    La valeur initiale de display est inline, donc display: initial est équivalent à display: inline. Voir cette réponse. Ce que vous essayez de faire est de réinitialiser les éléments quelle que soit leur valeur par défaut display est aussi donné par les navigateurs. Vous aurez besoin de connaître cette valeur à l'avance; pour div éléments c'est display: block.

    Malheureusement, cela va remplacer l'existant table-cell déclaration dans tous les navigateurs, pour des raisons évidentes. Dans ce cas, vous pourriez aussi bien tenir à la disposition de la table si elle travaille déjà pour vous, si vous avez besoin de prendre en charge les navigateurs qui ne supportent pas flexbox.

    Votre droite, sur la page normale réglage de flex-éléments de bloc ou en ligne fonctionne correctement. Malheureusement il semble que ma mise en page est tellement foiré que le navigateur est tellement confus qu'il ne fonctionne pas correctement mise en page. Je vais redessiner toute la page pour utiliser uniquement la flexbox 🙁 .

    OriginalL'auteur BoltClock

  2. 2
    .child {
  flex-shrink: 0;
}

    ajouter flex-propriété réduction pour prévenir le rétrécissement de plus que son contenu

    OriginalL'auteur Anees Kodappana