web-dev-qa-db-fra.com

Comment réinitialiser la propriété 'display' pour flex-item

J'essaie de convertir une ancienne mise en page basée sur des tableaux et JS vers le nouveau Flexbox avec une compatibilité descendante en conservant les tableaux pour les anciens navigateurs (spécifiquement 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é différentes définitions comme display:inherit, display:initial Mais aucune n'est capable de réinitialiser la définition d'affichage pour qu'elle fonctionne correctement en tant qu'élément flexible.

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

Quoi que je définisse dans l'affichage pour le .details, Il ne fonctionne pas en tant qu'élément flexible et ne se développe pas pour remplir l'espace restant.

Une idée de la façon de contourner cela sans utiliser JS pour détecter la version du navigateur et changer de style?

J'ai essayé de rechercher une solution sur Google, mais la plupart des résultats ne sont que des articles généraux sur Flexbox; seulement similaire est ce test qui ne résout tout simplement pas la compatibilité descendante.

MISE À JOUR 1: Il s'agit d'une démo JSFiddle d'une pure Flexbox et Flexbox combinée avec la disposition du tableau. Si vous redimensionnez la fenêtre de résultats, la mise en page pure rétrécit différemment de celle du bas qui combine le tableau et Flexbox. Remarque: dans Chrome cela fonctionne correctement, essayez-le dans Firefox, IE, Safari, etc.

MISE À JOUR 2: Safari fonctionne correctement avec les définitions préfixées ... démo JSFiddle mise à jour

csscss3tablelayoutflexbox
12
Radek Pech

Comme Danield l'a mentionné, tous les enfants d'un conteneur flexible (désigné par display: flex ou display: inline-flex) sont automatiquement des éléments flexibles. Il n'y a pas de propriété display pour un élément flexible; au lieu de cela, vous le définissez sur une autre valeur en fonction de la façon dont vous souhaitez que les enfants de l'élément flexible soient disposés. Si les navigateurs reconnaissent display: flex-item, alors ils ont probablement une implémentation non standard bizarre de "flexbox", parce que cette valeur n'a jamais existé dans aucune incarnation de la spécification Flexbox (et je n'ai aucune idée de ce que ce serait exactement correspondent à si tel é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 telle qu'elle est donnée par les navigateurs. Vous devrez connaître cette valeur à l'avance; pour les éléments div c'est display: block.

Malheureusement, cela remplacera le table-cell déclaration dans tous les navigateurs, pour des raisons évidentes. Dans ce cas, vous pouvez tout aussi bien vous en tenir à la disposition du tableau si elle fonctionne déjà pour vous, si vous devez prendre en charge les navigateurs qui ne prennent pas en charge la flexbox.

5
BoltClock

Il n'y a pas display:flex-item car une fois que vous avez défini display:flex sur un élément conteneur, les enfants sont automatiquement des éléments flexibles.

Voici ne démo pour montrer que le display:table-cell sur les enfants n'affecte pas la fonctionnalité des propriétés flex sur les enfants

Modifier: Pour Firefox et IE si vous ajoutez la règle display:flex après le display:table-cell règle alors le display:table-cell sur les enfants n'affecte pas la fonctionnalité des propriétés flex sur les enfants

/* 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>
5
Danield
.child {
  flex-shrink: 0;
}

ajouter la propriété flex-shrink pour éviter de rétrécir plus que son contenu

2
Anees Kodappana