Wie kann ich eine Anzeige erstellen: flex container horizontal mit dem eingewickelten Inhalt erweitern?

Question

Bei Verwendung von css flexbox scheinen sich die drei Hauptbrowser in bestimmten Bereichen völlig anders zu verhalten.

In diesem Fall versuche ich, ein Raster von Bildern zu erstellen:

<div class="container"> 
    <div class="photo"></div> 
    <div class="photo"></div> 
    <div class="photo"></div> 
    <div class="photo"></div> 
    <div class="photo"></div> 
    <div class="photo"></div> 
</div> 


.container { 
    display:inline-flex; 
    flex-flow : column wrap; 
    align-content : flex-start; 
    height : 100%; 
} 

In diesem Beispiel habe ich einen Behälter benötigen, selbst enthält mehrere div Elemente aufgebaut von oben nach unten und Verpackung zu fließen, wenn sie erreichen der Boden. Letztendlich versorgst du mich mit Fotosäulen.

Jedoch muss ich den Behälter horizontal erweitern, um die eingewickelt Elemente aufzunehmen:

Hier ist eine schnelle jsFiddle ist zu demonstrieren.

Das Verhalten ist wie folgt:

• IE 11 - Korrigieren, der Behälter horizontal erstreckt sich jede Spalte gewickelt Elemente
• Firefox einzuwickeln - Der Behälter wickelt nur die erste Spalte von Elementen mit dem Rest überlaufen.
• Chrome - Der Container dehnt sich immer aus, um die Breite seines übergeordneten Elements zu füllen, was auch immer das sein mag.

In diesem Fall möchte ich das Verhalten von IE11 in den anderen beiden Browsern erreichen. Deshalb ist meine Frage, wie kann ich einen flexbox Container horizontal erweitern, um seinen column wrap Inhalt zu entsprechen.

Vielen Dank im Voraus.

Answer 1

Es dieses Problem scheint nicht nur mit CSS gelöst werden, so schlage ich vor, Sie eine Lösung JQuery

Behälterbreite = Position des letzten Kindes - Position des Behälters + Breite des letzten Kindes (einschließlich Marge)

Code:

$(document).ready(function() { 
$('.container').each(function(index) { 
    var lastChild = $(this).children().last(); 
    var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true); 
    $(this).width(newWidth); 
    }) 
}); 

Demo:

http://jsfiddle.net/qzea320L/

Answer 2

Sie haben eine Spaltenlayoutverteilung mit einem Behälter mit fester Höhe.

Wenn Sie die Flex-Richtung auf Spalte festlegen, definieren Sie die vertikale Achse als Hauptachse.

In flexbox bedeutet das, dass es die verfügbare Höhe füllt und dann eine neue Spalte erstellt.

In diesem JSBIN Ich benutze Javascript, um die Höhe des Containers zu ändern, und deshalb werden Sie die untergeordneten Elemente verschieben sehen.

PS: Sie sollten sich nicht auf IE-Verhalten verlassen, da ihre Flex-Unterstützung neu ist.

Answer 3

Die Spezifikation sagt, dass, was Sie tun sollte funktionieren, aber es ist falsch mehrzeiligen inline-flexcolumn Layouts nutzlos für die meisten Entwickler derzeit implementiert in allen großen Browser außer Internet Explorer/Edge zu machen. Hier finden Sie eine Chromium bug report, die ein Beispiel liefert, das im Wesentlichen mit Ihrem identisch ist und in Chrome, Safari und Firefox falsch dargestellt wird.

Das Argument der Spezifikation ist komplizierter, als ich versteht, bin in der Lage zu sein, aber der entscheidende Punkt ist, dass Flexible Box Layout Module Level 1 spec die intrinsische Quer Größe eines Flex-Container definiert (das heißt, die innere Höhe eines flex-direction: row flex Behälter oder die Eigenmasse eines flex-direction: column Flex-Behälters) im Abschnitt Flex Container Intrinsic Cross Size. Dort heißt es:

Für eine multi-lineflex container, die min-content/max-contentcross size die Summe der Biegelinie Kreuz ist Größen

Das heißt, die innere Breite eines flex-direction: column flex Behälter sollte die Summe der Spaltenbreiten, wie Sie es erwarten. (Es gibt mehr Komplexität als das, und ich verstehe das alles nicht, aber ich glaube, dass das Obenstehende weitgehend zutrifft.) Chrome, Firefox und Safari berechnen diese Breite jedoch alle falsch. Einstellung width: min-content oder width: max-content auf einer Box in Chrome, können Sie deutlich sehen, dass die Breite auf die Breite der breitesten einzelnen Element eingestellt ist.

Eine silly Chrome-specific workaround existiert, wird aber wahrscheinlich am besten vermieden. Bis der Fehler behoben ist, funktioniert dieser Teil des Flexbox-Modells einfach nicht wie vorgesehen und es gibt keine saubere Lösung.

Answer 4

Es ist seltsam, dass die meisten Browser Column Flex Container nicht korrekt implementiert haben, aber die Unterstützung für Schreibmodi ist recht gut.

Daher können Sie einen Zeilen-Flex-Container mit einem vertikalen Schreibmodus verwenden. Dadurch wird die Blockrichtung mit der Inline-Richtung vertauscht, und die Flex-Elemente fließen vertikal. Dann müssen Sie nur den horizontalen Schreibmodus innerhalb der Flex-Elemente wiederherstellen.

.container { 
 
    display: inline-flex; 
 
    writing-mode: vertical-lr; 
 
    flex-wrap: wrap; 
 
    align-content: flex-start; 
 
    height: 350px; 
 
    background: blue; 
 
} 
 
.photo { 
 
    writing-mode: horizontal-tb; 
 
    width: 150px; 
 
    height: 100px; 
 
    background: red; 
 
    margin: 2px; 
 
}

<div class="container"> 
 
    <div class="photo">1</div> 
 
    <div class="photo">2</div> 
 
    <div class="photo">3</div> 
 
    <div class="photo">4</div> 
 
    <div class="photo">5</div> 
 
    <div class="photo">6</div> 
 
    <div class="photo">7</div> 
 
    <div class="photo">8</div> 
 
    <div class="photo">9</div> 
 
</div>

Dieser Ansatz kann seine eigenen Fehler in Grenzfällen, vor allem, wenn Sie erweiterte Layout-Techniken wie Schwimmer und verschachtelte flexboxs mischen. Aber in den meisten Fällen scheint es richtig zu funktionieren.