Warum flexbox-Element-Bilder skalieren unterschiedlich in Abhängigkeit von Ihrer anfänglichen Größe?

Habe ich vier Bilder: zwei kleine, zwei große (Maße in html angezeigt). Sie alle haben Ihre img width auf 100% eingestellt, aber Ihre Eltern-div ist festgelegt auf eine bestimmte Breite. Wenn ich die Größe des browser-Fensters die kleineren Bilder verkleinern und die größeren nicht, sofort.

Habe ich einen roten Rahmen um die divs und grünen Rahmen um die imgs. Die kleineren Bilder, die' grünen Grenze schrumpfen, bevor Sie größere. Warum ist das so?

http://jsfiddle.net/brcrnj80/6/

img {
  border: 3px solid green;
  width: 100%;
}

.item {
  border: 1px solid red;
  max-width: 250px;
  min-width: 60px;
  margin: 10px;
}

Dank

  • ich brauche eine Klarstellung. Meinst du, warum tun Sie überschreiten die Grenze der flex-container? oder warum tun Sie schrumpfen auf das minimum zu unterschiedlichen Preisen? Weil der Blick auf Ihre Geige (in Chrome) Sie alle Größe, in der gleichen Zeit, auch wenn ich die Geige und das größte Bild ist noch ausfüllen, Sie alle Größe zur gleichen Zeit. Die kleineren Bilder, die scheinen, zu erhalten, zu min-width ersten, aber das kann nur eine Wahrnehmung-Problem auf meiner Seite, da die Bilder nähern sich der Wert min.
  • Darauf hinzuweisen, dass es einen webkit-bug (alle safari-Versionen, bei denen die flexbox wird unterstützt, mobile eingeschlossen), die verhindert, dass ein flex-container von wrapping flex-Elemente, wenn Sie Begegnung ein flex-Element min-width (bugs.webkit.org/show_bug.cgi?id=136041). Es ist ein ziemlich fiesen bug und macht versuchen, zu verwenden flexbox mit min-width flex-Elemente praktisch nutzlos (aufgrund der allgegenwärtigen Natur safari auf mobilen Geräten).
  • FF zumindest) Die Blume nicht beginnen, um die Größe ändern, bis die Pilze ziemlich klein. Ist dies nicht der Fall, in chrome (kein Zugriff auf chrome im moment)
  • ok - auf dieser Basis würde ich sagen, es ist ein rendering-Problem des FF - wie @Adam schlägt vor, möchten Sie vielleicht, um sicherzustellen, dass Ihre css-beinhaltet all die verschiedenen Geschmacksrichtungen der flex-Definitionen. Siehe A Guide to flexbox über bei CSS-Tricks an der Unterseite, siehe Abschnitt Voranstellen FlexBox
  • Ich habe keine IE11 handy um es zu testen, fand ich aber erwähnen, online, IE11 mit noch größeren Problemen bei der Verwendung von max-width auf flex-Elemente.
  • leider, die min-width-bug ist nicht im Zusammenhang mit, einschließlich aller Varianten von flex-Definitionen (von denen gibt es viele), dies ist eine regelrechte rendering-bug (das wurde nicht einmal bestätigen, um mein wissen?) im Safari.
  • Ich bin damit einverstanden. Aber vielleicht sollte ich das gemacht haben, ist dieser mehr klar. Wenn Sie einen Fall haben, wo ein bestimmter browser hat weniger als gewünscht Verhalten, das beste, was Sie tun können, ist bieten fallback für so viele browser "kits" wie möglich. Nach, dass, wenn es keine andere programmatische Lösungen, du lebst mit dem Ergebnis oder ändern Sie Browser.
  • die Arbeit ist nur ein Medien-Abfrage, um die Größe, dass die flex-items geschlagen hätten, Ihre min-width und ändern Sie den layout-Regeln (in der Regel entweder durch eine re-Definition der CSS-flex-oder width-Eigenschaft des flex-Element.
  • ok, aber nicht die zugrunde liegende Problem des OP, das ist eine falsche Darstellung von unterschiedlichen Browsern mit dem gleichen Bildschirm-Dimensionen. Mit media queries um Funktionen zu entfernen, zu beheben ein rendering-bug ist nicht wirklich viel für eine Lösung, und es ist nicht das, was media queries bestimmt waren, zu behandeln. Aber hey, wenn es funktioniert... ich bin alle für es.
  • Ich habe nicht versucht, die zugrunde liegenden Problem (zumindest in den Kommentaren, aber ich habe eine Antwort, die funktioniert, unten). Alles was ich sagte, ist, dass sollten Sie nicht verwenden min-width auf flex-Elemente in den aktuellen Stand der Dinge wegen den schlechten support, dass alle safari-Versionen haben für diesen Umstand.
  • Die Firefox vs. Chrome Problem oben diskutiert (z.B. im 3./4. Kommentar hier, zwischen James & fnostro) ist eigentlich ein Chrome-bug-Sie sind falsch lassen max-width Einfluss der gelöst-Wert von flex-basis:auto. (Sie sind die Anwendung max-width zu früh in den flex-layout-Algorithmus, im Grunde.) Ich bin der Planung über die Einreichung einer detaillierte Fehler später heute Abend, und ich werde die bug-Nummer hier zur Referenz.
  • Tatsächlich, erkannte ich, dass der Firefox vs. Chrome-Problem ist ein Fall von etwas, underspecified (mit der Skillung ändern von pretty-speziell fordert, dass der Firefox Verhalten, weniger spezifische, im Laufe der Zeit). Also, anstatt die Einreichung einer Chrome/Blink-bug, ich fragte, die CSS-Arbeitsgruppe zu klären: lists.w3.org/Archives/Public/www-style/2015Feb/0377.html

InformationsquelleAutor tazboy | 2015-02-17
  1. 13

    tl;dr: Die Elemente sind Größenänderung anders weil Sie eine andere flex-basis, basierend auf der Bild Größe und ist der Wert, dass Sie beginnen, beugen Sie (verkleinern) aus. Jedes Element hat zu schrumpfen, aber die größeren Elemente schrumpfen von einer größeren Start-Punkt, so sind Sie noch größer, nach dem verkleinern. (Es gibt auch ein spät-in-die-Algorithmus "clamp", um zu verhindern, dass die größer sind als Ihre max-width; dies ist, was hält die großen Elemente aus, verrückt zu sein-riesig, in diesem Fall. Aber wichtiger ist, Sie beginnen Ihre schrumpfenden von Ihren flex-basis, und die max-width clamp ist ein nachträglicher Einfall.)

    UPDATE:, Wenn Sie jedem flex-Element die gleiche flex-basis, z.B. flex-basis:250px (die gleichen wie Ihre max-width), werden Sie wahrscheinlich bekommen die Ergebnis die Sie suchen. Aktualisiert fiddle: http://jsfiddle.net/brcrnj80/10/

    (Wie bereits in einer anderen Antwort, flex: 1 1 0 (was ausgedrückt werden kann prägnanter als flex:1) wird auch die Arbeit -- das ist die Einstellung der flex-basis auf 0, und so dass die flex-items zu wachsen (anstatt Sie zu zwingen, schrumpfen) von dort aus bis zu Ihrer max-width. Liefert die gleichen Ergebnisse, nur über einen anderen Weg.)

    LÄNGERE ERKLÄRUNG: Hier ist, was passiert:

    1. Standardmäßig, alles hat flex-basis:auto, was in diesem Fall bedeutet, dass jeder flex-Element beginnt, seine Biegung an seinem Bild die intrinsische Breite. So Ihr riesige-Bild-flex-Elemente haben eine große flex-basis, und Ihre kleinen-Bild-flex-Elemente haben eine kleine flex-basis.
    2. Sehen wir, wenn die Summe der flex-items' flex-basis Werte sind größer als die container. Sie sind (weil einige Ihre Bilder sind riesig). Also, wir haben zu schrumpfen Dinge.
    3. Wir schrumpfen jedes flex-Element "ziemlich", ausgehend von seiner flex-basis, von welchem Teil ist notwendig, um alle Elemente passen. So z.B. jeder Element verliert 1/4 seiner Breite, zum Beispiel (wenn das passiert, werden die richtigen Bruchteil, um Sie alle genau auf die container).
    4. JETZT, wir überprüfen Sie, ob diese "vorläufige" Punkt-Größen gegen das Element max-width. Flex-Elemente mit großen Bildern wahrscheinlich gegen Ihre max-width an diesem Zustand, weil z.B. auch wenn wir 1/4 der Größe (in meinem Beispiel), Sie sind immer noch viel größer als Ihre max-width:250px. Für Rechtsverletzungen werden wir freeze das Element bei seiner max-width und wir starten den schrumpfvorgang. (Wir tun etwas ähnliches für min-width Verletzungen.)
    5. In der neu schrumpfvorgang, die großen Bilder sind eingefroren 250px Breite, und die kleineren Bilder, die sind verantwortlich für alle schrumpfen.

    So, wenn es nicht genug Platz für alle zu haben 250px Breite, Ihre kleine flex-Elemente bis zum Ende tun Sie alle das schrumpfen. (Es sei denn, wir sind eingeschränkt genug, dass die große Gegenstände verkleinert werden, um weniger als 250px in der ersten Runde der schrumpfenden -- z.B. wenn wir schrumpfen jedes Element um 90%, zu sagen. Wenn, dann kleine Gegenstände werden auch geschrumpft um 90%, und Sie werden weniger als Ihre min-width:60px, und Sie werden eingefroren, die Größe, und wir werden neu starten, das schrumpfen in der gleichen Weise, die ich oben beschrieben habe).

    Sehen die "Lösung Flexible Länge" chunk von der Skillung für mehr details, wenn du neugierig bist.

    • Obwohl Sie erscheinen können, um den gleichen Effekt in der aktuellen Umstände, flex: 1 ist das gleiche wie flex: 1 1 auto, nicht flex: 1 1 0
    • NÖ, "flex:1" ist in der Tat äquivalent zu "flex: 1 1 0". Während der anfängliche Wert der flex-basis ist in der Tat "auto", wird der flex-Kürzel setzt ihn auf 0 (technisch "0%" in der spec), wenn Sie einen "flex" - Kürzel Wert ohne eine explizite flex-basis. Spec references: dev.w3.org/csswg/css-flexbox-1/#valdef-flex-flex-basis und dev.w3.org/csswg/css-flexbox-1/#flex-initial, die Speziell "weggelassen, Wenn aus dem flex-Kürzel ein, seinen [flex-basis] der angegebene Wert ist 0%.
    • Tolle Referenzen, nicht wirklich eine ganze Menge Sinn, in meine persönliche Meinung, aber die spec nicht liegen. Danke.
    • Das war der trick. Schließlich bekam ich zu sehen, ein Beispiel, wenn die flex-basis ins Spiel kommt. Danke.
    InformationsquelleAutor dholbert
  2. 2

    Jemand gepostet, hier die Antwort früher (ich bin fast sicher, ich bin nicht sicher, warum es entfernt wurde?).

    Ja, das ist ein rendering Unterschied zwischen chrome und firefox, aber es ist leicht behoben, indem diese:

    .item { flex: 1 1 0; }

    Dies sagt dem browser, dass alle flex-items sollte beginnen mit 0 Breite, und alle wachsen mit der gleichen rate zu füllen den übrigen Raum.

    InformationsquelleAutor Adam
Schreibe einen Kommentar