Uneinheitliche flex-wachsen in letzter Reihe mit flex-wrap

Question

bitte mein sehr einfachen Beispiel für Flex-Layout sehen:

Es gibt

• Behälter mit
  • flex-Box eingeschaltet (Anzeige : flex)
  • Verpackung (flex-wrap: Wrap)
• einige es ems darin, die
  • flex-grow haben auf 1 gesetzt = alle Elemente skaliert ebenso
  • flex-Schrumpf 0 = keine Einzelteile werden verkleinere nicht
  • flex-Basis = alle Artikel gleiche Basisbreite

Trotz aller Regelsätze, Elemente in letzter Reihe haben unterschiedliche Breite? Wie ist das möglich, wenn der Flex-Grow sagt, dass alle Items gleich skaliert werden?

Zitat von http://www.w3schools.com/cssref/css3_pr_flex-grow.asp:

Die Flex wachsen Eigenschaft gibt wie viel das Element an den Rest der flexiblen Elemente in demselben Behälter relativ wachsen wird.

Das ist cool, aber meine Artikel in der letzten Reihe wachsen ein bisschen mehr als andere. Irgendwelche Ideen?

flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
item { 
 
    flex: 1 0 4rem; 
 
    height: 4rem; 
 
    margin: 0.5rem; 
 
    border: 1px solid lightblue; 
 
}

<flex> 
 
    <item></item> 
 
    <item></item> 
 
    <item></item> 
 
    <item></item> 
 
    <item></item> 
 
    <item></item> 
 
    <item></item> 
 
    <item></item> 
 
</flex>

Answer 1

Die Flex grow und shrink Faktoren sind grundsätzlich zu Resolve Flexible Lengths verwendet. Dies geschieht jedoch unabhängig für jede Flex-Linie (Zeile oder Spalte).

Um die flexible Längen der Elemente innerhalb einer Biegelinie zu lösen: [...]

• Wenn die flex wachsen Faktor

  das Verhältnis des Elements finden mit flex Wachstumsfaktor zur Summe der Flex-Wachstumsfaktoren aller ungefrorenen Artikel auf der Linie. Legen Sie die Zielhauptgröße des Elements auf die Flex-Basisgröße plus einen Bruchteil des verbleibenden freien Speicherplatzes fest, der proportional zum Verhältnis ist.

• Wenn der Flexschrumpffaktor

  Für jeden nicht gefrorenen Artikel auf der Linie mit, seinen Flexschrumpffaktor von seiner inneren Flexbasisgröße multiplizieren, und notieren Sie diese als skalierte flex Schrumpffaktor.Ermitteln Sie das Verhältnis des skalierten Flex-Schrumpfungsfaktors des Elements zur Summe der skalierten Flex-Schrumpfungsfaktoren aller ungefrorenen Elemente auf der Linie. Legen Sie die Zielhauptgröße des Elements auf die Flex-Basisgröße abzüglich einen Bruchteil des absoluten Werts des verbleibenden freien Speicherplatzes proportional zum Verhältnis fest.

Die CSS-Arbeitsgruppe dieses Problems bewusst ist und plans to introduce some way to fix it in Flexbox Level 2

Löse die „Artikel in der letzten Zeile bekommen viel zu groß, wenn Sie beugen“ Problem. Ganz allgemein: "Stellen Sie sicher, dass Artikel eine konstante Flex-Größe haben, , unabhängig davon, wie viel zusätzlicher Platz in jeder Zeile ist".

Mögliche Lösung - füllen Sie die letzte Zeile mit "Phantomkopien" des letzten Elements aus, biegen Sie mit ihnen hinein und entfernen Sie sie.

Mögliche Lösung - berechnen Sie Mindestwerte von 1fr und Ausrichtung freien Speicherplatz über die gesamte flexbox (anstelle von per-Linie) und verwenden dass.