Wie um zu verhindern, dass Inhalte aus re-sizing ein flex-Element?

Ich bin mit CSS flexbox, um zu bauen eine skalierbare, responsive grid. Wenn Sie ein Google Diagramm, um eine der flexbox-Elemente, das Element mit der änderung der Größe immer so leicht. Es ist genug, um zu werfen das Netz aus der Ausrichtung. Ich habe die folgenden Bilder veranschaulichen das Problem.

Flexbox-Gitter vor der Anwendung Google chart zu Artikel 6:

Wie um zu verhindern, dass Inhalte aus re-sizing ein flex-Element?

Flexbox-grid nach der Anwendung Google chart zu Artikel 6:

Wie um zu verhindern, dass Inhalte aus re-sizing ein flex-Element?

Des Flexbox-grid lädt schneller als das Google-Diagramm, also das Netz ursprünglich Lasten korrekt. Allerdings, wenn das chart lädt, Punkt 6, dehnt sich leicht, wodurch Bild 2 oben.

In der mittleren Spalte flex-container und Element 6 div setup in css wie folgt:

#middlecolumn {
    width: 75%;
    height: 100%;
    display: flex;
    flex-flow: column;
    margin: 0.25%;
}

#item6_div {
    flex: 3;
    margin-top: 0.8vh;
}

Beachten Sie, dass die items 5 und 7 setup die gleiche Weise in css, mit flex Werte 1. I. e. Punkt 6 ist 3-fache der Höhe der Elemente 5 und 7. Als solche, wenn das Element 6, ändert sich die Größe der 3:1-Verhältnis beibehalten wird.

Gibt es etwas, was ich bin fehlt in css um zu verhindern, dass die Google-Diagramm-von der Größenänderung seiner flexbox-container Element?

InformationsquelleAutor jars121 | 2016-03-28
  1. 10

    Wenn Sie sagen, ein flex-Element flex: 3 (Item 6) oder flex: 1 (Items 5 & 7), hier ist, wie diese Kurzschrift-Eigenschaft bricht:

    flex: ?  =  <flex-grow>, <flex-shrink>, <flex-basis>

flex: 3 =  flex-grow: 3, flex-shrink: 1, flex-basis: 0

flex: 1 =  flex-grow: 1, flex-shrink: 1, flex-basis: 0

    In beiden Fällen, die flex-shrink Faktor ist 1, was bedeutet die flex-Element erlaubt ist, verkleinert sich proportional.

    Um zu verhindern, dass die flex-Elemente von Schrumpfung, die möglicherweise die Ursache der Fehlstellung, die ich ändern würde die flex-shrink 0.

    Statt flex: 3 und flex: 1 versuchen:

    flex: 3 0 0;
flex: 1 0 0;

    Mehr details in das flexbox-spec: 7.1.1. Grundlegende Werte von flex

    Aber Sie müssen möglicherweise ein anderes problem. Sie schrieb:

    Beachten Sie, dass die items 5 und 7 setup die gleiche Weise in css, mit flex Werte 1. I. e. Punkt 6 ist 3-fache der Höhe der Elemente 5 und 7. Als solche, wenn das Element 6, ändert sich die Größe der 3:1-Verhältnis beibehalten wird.

    Diese nicht wie die flex-grow - Eigenschaft funktioniert.

    Durch die Anwendung flex-grow: 3 zu einem flex-Element, das Sie sagen, es zu konsumieren dreimal mehr Platz als flex-Elemente mit flex-grow: 1. Das bedeutet nicht unbedingt Punkt 6 wird drei mal die Größe der Elemente 5 und 7.

    Erfahren Sie mehr darüber, wie flex-grow funktioniert hier: flex-grow nicht Größenanpassung flex-items wie erwartet

    Als alternative Dimensionierung-Methode, die Sie verwenden möchten, können Sie die flex-basis Eigenschaft. Versuchen flex: 0 0 60% auf Position 6, und die flex: 0 0 20% auf Artikel 5 und 7.

    • Vielen Dank Michael, deine Antwort hier und in dem verlinkten thread hat sich gewaltig verändert mein Verständnis für die verschiedenen flex-Eigenschaften. Wie bei dem verlinkten thread, die Ränder habe ich zwischen den Beschäftigten der flex-items spielt Verwüstung mit der Ausrichtung, aber ich denke, dein Ansatz irgendwann werden Sie mich dort.
    InformationsquelleAutor Michael_B
Schreibe einen Kommentar