wake-up-neo.com

Wie kann man die Flexbox dazu bringen, Füllungen in Berechnungen einzubeziehen?

Unten sind zwei Zeilen.

  • Erste Zeile ist zwei Elemente bei flex 1 und einer bei flex 2.

  • Zweite Zeile ist zwei Elemente bei flex 1.

Entsprechend der Spezifikation 1A + 1B = 2A

Wenn jedoch padding in die Berechnung einbezogen wird, ist die Summe falsch, wie Sie im folgenden Beispiel sehen können.


FRAGE

Wie kann man die Flexbox dazu bringen, die Polsterung in die Berechnung einzubeziehen, damit die Boxen im Beispiel richtig ausgerichtet sind?

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:0 10px 10px 0;
}
.Item > div{
  background:#7ae;
}
.Flx2{
  flex:2;
}
<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>

23
DreamTeK

Die Lösung:

Setzen Sie margin für das untergeordnete Element anstelle von padding für Ihr flex-Element.

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
}
.Item > div{
  background:#7ae;
  margin:0 10px 10px 0;
}
.Flx2{
  flex:2;
}
<div class="Row">
  <div class="Item">
    <div>1A</div>
  </div>
  <div class="Item">
    <div>1B</div>
  </div>
  <div class="Item Flx2">
    <div>1C</div>
  </div>
</div>

<div class="Row">
  <div class="Item">
    <div>2A</div>
  </div>
  <div class="Item">
    <div>2B</div>
  </div>
</div>


Das Problem:

Die Berechnung erfolgt ohne padding. So; Durch Hinzufügen von padding zum flex-Element erhalten Sie Ihre erwartete Breite nicht durch die spec .

Der spezifische Artikel

Der für ein Flex-Element in einem Floating-Flex-Container mit automatischer Größe verfügbare Platz ist beispielsweise:

  • die Breite des Flex-Containers, der den Block enthält, abzüglich Rand, Rand und Polsterung des Flex-Containers in der horizontalen Dimension
  • unendlich in der vertikalen Dimension

Warum wird die Polsterung nicht berechnet? Das ist es, was die Spezifikation will.

Bestimmen Sie den verfügbaren main- und cross-Raum für die flex-Elemente. Wenn diese Dimension des Inhaltsfelds von flex container eine bestimmte Größe hat, verwenden Sie diese für jede Dimension. Wenn diese Dimension des flex container unter einer min- oder max-content-Einschränkung dimensioniert wird, ist der verfügbare Platz in dieser Dimension diese Einschränkung. Andernfalls subtrahieren Sie den Rand, den Rand und die Auffüllung des Flex-Containers vom verfügbaren Platz des Flex-Containers in dieser Dimension und verwenden Sie diesen Wert. Dies kann zu einem unendlichen Wert führen.

Wenn Sie die padding und margin von der Größe des Elements subtrahieren, erhalten Sie:

A1 + A2 = B1

Danach wurde die Auffüllung jedoch dem Element hinzugefügt. Je mehr Elemente, desto mehr Polsterung. Das wird in der Breite nicht berechnet, was dazu führt, dass Ihre Aussage falsch ist.

23
Randy

Wie kann man die Flexbox dazu bringen, Füllungen in Berechnungen einzubeziehen?

In Ihrem Code wird ist in die Berechnungen eingefügt.

Entsprechend der Spezifikation 1A + 1B = 2A

Ich glaube nicht, dass das richtig ist. Geben Sie möglicherweise eine Linkreferenz für eine Erklärung an.


Die flex-grow-Eigenschaft

Wenn Sie flex: 1 auf ein Element anwenden, verwenden Sie die flex-Eigenschaft, um dies zu sagen:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

flex-grow weist ein Flex-Element an, den freien Speicherplatz im Container zu belegen.

Hier ist dein Code:

.Item {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 10px 10px 0;
}

In der ersten Zeile wird padding-right: 10px auf drei flex-Elemente angewendet.

In der zweiten Zeile wird padding-right: 10px auf two flex-Elemente angewendet.

In der ersten Zeile gibt es also 10px weniger freien Speicherplatz. Dadurch wird die Ausrichtung des Gitters unterbrochen.

Verwenden Sie flex-grow, um Speicherplatz zu verteilen (z. B. wenn ein Element die verbleibende Höhe oder Breite eines Containers annehmen soll).

Verwenden Sie flex-basis, width oder height, um ein Flex-Element präzise zu dimensionieren.

Hier einige weitere Infos:

4
Michael_B

Sie können floated Pseudo-Blockelemente anstelle von Auffüllen verwenden, wie folgt: (In diesem Fall 30px-Auffüllung rechts)

.Item:after {
  content: '';
  display: block;
  float: right;
  width: 30px;
  height: 100%;
}

0
sorioz