Wie wirkt sich die Marge auf die Flex-Grow-Größe in Flexbox-Layouts aus?

Größe von Flex-Elementen mit Flex-Grow anpassen

In Flexbox-Layouts werden Flex-Elemente entsprechend ihrem Flex-Grow dimensioniert -Eigenschaft, die angibt, wie viel freien Speicherplatz jedes Element belegen soll. Es gibt jedoch bestimmte Faktoren, die sich auf die berechnete Größe von Flex-Elementen auswirken können, einschließlich Inhalt und Ränder.

Problemübersicht

Beachten Sie den folgenden Code:

.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

#number0 {
    flex-grow: 2;
}

#colon {
    flex-grow: 1;
}

<div class="numbers">
    <div class="row">
        <div class="button number">
<p>In diesem Beispiel gehen wir davon aus, dass die Schaltfläche „0“ doppelt so breit ist wie die anderen Schaltflächen und die Doppelpunkt-Schaltfläche halb so breit sein. Allerdings scheint die Ausrichtung dieser Schaltflächen etwas abweichend zu sein.</p>
<p></p>
<h3 id="Ursache-des-Problems">Ursache des Problems</h3>
<p>Das Problem entsteht, weil der verfügbare Platz in jeder Zeile bestimmt wird durch die Gesamtbreite der Schaltflächen und die darauf angewendeten Ränder. In unserem Beispiel haben die ersten drei Zeilen jeweils zwei horizontale Ränder, während die vierte Zeile nur einen hat. Dies führt dazu, dass die vierte Reihe mehr freien Platz hat als die anderen Reihen, was sich auf die Platzverteilung auf die Flex-Elemente auswirkt.</p>
<p></p>
<h3 id="Flex-Basis-für-zuverlässigere-Größenbestimmung-verwenden">Flex-Basis für zuverlässigere Größenbestimmung verwenden</h3>
<p>Um dieses Problem zu beheben, wird empfohlen, stattdessen <strong>flex-basis</strong> zu verwenden <strong>Flex-Grow</strong> für eine zuverlässigere Größenbestimmung von Flex-Artikeln. Flex-Basis legt die Anfangsgröße des Elements unter Berücksichtigung seines Inhalts und seiner Ränder fest. Indem wir die Flex-Basis für jede Schaltfläche angeben, können wir sicherstellen, dass allen unabhängig von den Rändern der gleiche Platz gegeben wird.</p>
<p>Hier ist der korrigierte Code:</p>
<pre class="brush:php;toolbar:false">.button {
    flex-basis: 33.33%;
}

#number0 {
    flex-basis: calc(66.67% + 10px);
}

* {
    box-sizing: border-box;
}

Von Durch die Aktualisierung der Flex-Basis können wir die gewünschte Ausrichtung der Schaltflächen erreichen, wobei die „0“-Schaltfläche doppelt so breit wie die anderen Schaltflächen und die Doppelpunkt-Schaltfläche halb so breit ist.