Wie setzen Sie 'display' - Eigenschaft für das flex-Element

Ich versuche zu konvertieren alte layout basiert auf Tabellen und JS auf die neue Flexbox-mit Abwärtskompatibilität, indem die Tabellen für die alten Browser (speziell IE8, IE9 und Opera 10+).

Das problem ist, dass es keine display:flex-item zu überschreiben, der alte Stil der display:table-cell.

Ich habe versucht, verschiedene Definitionen wie display:inherit, display:initial aber keiner ist in der Lage, um die Anzeige zurücksetzen definition korrekt als flex-Element.

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

Was ich im display für die .details es nicht funktioniert als " flex-Element und nicht wachsen füllen den übrigen Raum.

Eine Idee, wie man das überschreiben, ohne mit JS zu erkennen, browser-version und schalten Sie die Stile?

Ich habe versucht, googeln Lösung, aber die meisten Ergebnisse werden nur Allgemeine Artikel über Flexbox; nur ähnlich ist dieser test, die Sie einfach nicht lösen, die rückwärts compatility.

UPDATE 1:
Dies ist ein JSFiddle demo einer reinen Flexbox-und Flexbox-kombiniert-mit-Tisch-layout. Wenn Sie die Größe der Ergebnis-Fenster, das Reine layout schrumpft, anders als die untere, die kombinieren, Tisch und Flexbox.
Hinweis: in Chrome funktioniert dies ordnungsgemäß, versuchen Sie es in Firefox, IE, Safari, etc.

UPDATE 2:
Safari funktioniert einwandfrei mit dem Präfix-Definitionen... aktualisiert JSFiddle demo

InformationsquelleAutor Radek Pech | 2014-11-26
  1. 5

    Als Danield erwähnt hat, alle Kinder der flex-container (gekennzeichnet durch display: flex oder display: inline-flex) werden automatisch flex-Elemente. Es gibt keine display - Eigenschaft für ein flex-Element; stattdessen legen Sie es auf einen anderen Wert, je nachdem, wie Sie wollen, dass die Kinder der flex-Element angelegt werden. Wenn Browser erkennen display: flex-item, dann werden Sie wahrscheinlich haben einige seltsame nicht-standard-Implementierung von "flexbox", weil dieser Wert nie existiert hat, in irgendeiner Inkarnation des Flexbox-spec (und ich habe keine Ahnung, was genau es entsprechen würde, wenn Sie es haben).

    Den anfänglichen Wert display ist inline, so display: initial entspricht display: inline. Sehen diese Antwort. Das, was du versuchst zu tun ist, zurücksetzen der Elemente, was auch immer Ihre Standard - display ist als gegeben von Browsern. Sie müssen wissen, dieser Wert im Voraus; für div Elemente es display: block.

    Leider, dies überschreibt die vorhandenen table-cell Erklärung in allen Browsern, aus offensichtlichen Gründen. In diesem Fall, könnte man genauso gut einfach mit dem Tisch-layout, wenn es schon für Sie arbeitet, wenn Sie brauchen, um Unterstützung für Browser, die nicht unterstützen flexbox.

    • Ihr Recht, auf der normalen Seite festlegen von flex-Elemente auf block-oder inline-funktioniert einwandfrei. Leider, es scheint, mein Seitenlayout ist so Durcheinander, dass der browser ist so verwirrt, es funktioniert nicht, wie die korrekte layout. Ich werde redesign der gesamten Seite nur die flexbox 🙁 .
    InformationsquelleAutor BoltClock
  2. 5

    Gibt es keine display:flex-item denn wenn Sie display:flex auf ein container-element, die Kinder sind automatisch flex-Elemente.

    Hier ist eine demo zu zeigen, dass die display:table-cell auf die Kinder hat keinen Einfluss auf die Funktionalität des "flex-Eigenschaften" auf die Kinder

    Edit: Für Firefox und IE, wenn Sie eine Regel hinzufügen display:flex nach der display:table-cell Regel dann der display:table-cell auf die Kinder hat keinen Einfluss auf die Funktionalität des "flex-Eigenschaften" auf die Kinder

    CSS:

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

    HTML:

    <div class="layout">
  <div class="picture">
    <img src="...">
  </div>
  <div class="details">username, email, etc.</div>
</div>

    • Nein, es scheint zu funktionieren, weil unter normalen Umständen flex-Element und table-cell funktioniert auf die gleiche, aber wenn Sie in einem extremen Zustand (z.B. kleiner Bildschirm) die flex-items zu arbeiten beginnt, anders als die Tabelle-Zellen. Versuchen Sie, diese demo: jsfiddle.net/nothrem/do525ff3/1 und stellen Sie das Ergebnis-Fenster zu schmal - oberen layout (Reine flexbox) schrumpft, anders als die untere (Tabelle-Zellen in flexbox).
    • Welchen browser verwenden Sie zu mir, Sie gleich Aussehen, sogar auf einer schmalen Breite Bildschirm
    • In Chrome funktioniert es einwandfrei, aber FF, IE und Safari sind gebrochen. (Aktualisiert im ersten Kommentar)
    • Interessanterweise, wenn Sie eine Regel hinzufügen display:flex nach der display:table-cell Regel für die flex-Elemente, die es scheint zu funktionieren, in anderen Browsern auch. cssdeck.com/labs/bctqezgs
    • Mit flexbox-hilft - Browser wohl erwarten, dass die flex-Elemente werden sowohl flex-Element und innere flexbox, aber es bricht das innere layout, weil die Elemente in der Tabelle-Zelle wiederum in flex-Element selbst. Sie müssen wrap-der Inhalt der alten Tabelle-Zellen in ein anderes element zu halten, deren Anordnung unberührt. Nicht bequem, aber immer noch die beste Lösung. Final demo: jsfiddle.net/nothrem/do525ff3/4
    InformationsquelleAutor Danield
  3. 2
    .child {
  flex-shrink: 0;
}

    hinzufügen, flex-shrink die Eigenschaft zu verhindern, schrumpfen mehr als sein Inhalt

    InformationsquelleAutor Anees Kodappana
Schreibe einen Kommentar