Wie man flexbox auf die padding in den Berechnungen?

Unten sind zwei Zeilen.

  • Ersten Zeile ist, die zwei Elemente auf flex 1 und einer an flex 2.

  • Zweiten Reihe ist, die zwei Elemente auf flex 1.

Laut spec 1A + 1B = 2A

Aber wenn Polsterung in die Berechnung einbezogen, die Summe ist falsch, da sehen Sie im Beispiel unten.

FRAGE

Wie man flex-box für padding in seiner Berechnung, so dass die Boxen in der Beispiel-Zeile korrekt?

CSS:

.Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:0 10px 10px 0;
}
.Item > div{
  background:#7ae;
}
.Flx2{
  flex:2;
}

HTML:

<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>

InformationsquelleAutor DreamTeK | 2016-06-13
  1. 35

    Die Lösung:

    Set margin auf das Kind-element statt padding auf Ihre flex Element.

    CSS:

    .Row{
  display:flex;
}
.Item{
  display:flex;
  flex:1;
  flex-direction:column;
}
.Item > div{
  background:#7ae;
  margin:0 10px 10px 0;
}
.Flx2{
  flex:2;
}

    HTML:

    <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, das hinzufügen padding zu den flex element ist nicht geben Sie Ihre voraussichtliche Breite der
    spec.

    Der bestimmte Artikel

    Beispielsweise der verfügbare Platz, um eine flex-Element in einem Schwamm auto-Größe flex-container ist:

    • die Breite des flex-Containers mit block abzüglich der flex-container margin, border und padding in der horizontalen dimension
    • unendliche in der vertikalen dimension

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

    Bestimmen Sie den verfügbaren main und cross Raum für die flex Elemente. Für jede dimension, wenn diese dimension von der flex container's content-box ist eine bestimmte Größe, Gebrauch, dass, wenn diese dimension von der flex container wird bemessen unter eine min oder max-content Einschränkung der zur Verfügung stehende Platz in dieser dimension ist, dass Zwang; sonst subtrahieren Sie die flex-container margin, border und padding von den verfügbaren Platz, um die flex-container in diese dimension und diesen Wert verwenden. Könnte dies in einen unendlichen Wert.

    Wenn Sie subtrahieren die padding und margin aus dem element der Größe, die Sie erhalten:

    1A + 1B = 2A

    Jedoch, nachdem Sie das getan, die Polsterung wurde Hinzugefügt, um das element. Je mehr Elemente, desto mehr Polsterung. Das ist nicht berechnet, in die Breite, wodurch Ihre Aussage falsch ist.

    • Dies nicht nur mein problem gelöst, aber war sehr hilfreich, Verständnis flex auch. Danke.
    • das problem bei der Verwendung von margin statt padding, ist, dass, wenn Sie die Maus auf den Rand Abschnitt, es wird nicht zählen, wie Sie schweben auf, dass element.
    • Es ist auch nicht zu helfen, wenn du die Polsterung für Grenzen. Ich hatte gehofft, Einstellung box-sizing: border box; würde helfen, aber kein solches Glück...
    • Es ist nicht wirklich klar: Die spec-Abschnitt, den Sie hervorgehoben sagt: "...subtrahieren Sie die flex-container margin, border und padding von den verfügbaren Platz...", Aber die Polsterung ist nicht auf dem flex-container. Es ist auf der flex-Elemente. (Die verschachtelte flex-container ist nicht relevant für das problem.) Also ich bin mir nicht sicher, dass diese Auszüge gelten.
    InformationsquelleAutor Randy
  2. 5

    Wie man flexbox auf die padding in den Berechnungen?

    In Ihrem code, Polsterung ist in die Berechnungen einbezogen.

    Laut spec 1A + 1B = 2A

    Glaube ich nicht, das ist richtig. Vielleicht geben Sie einen link-Verweis auf eine Erklärung.

    Die flex-grow Eigenschaft

    Wenn Sie flex: 1 zu einem element, Sie sind mit der flex Kurzschrift-Eigenschaft, um zu sagen:

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

    flex-grow sagt ein flex-Element zu konsumieren, den freien Platz im container.

    Hier ist dein code:

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

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

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

    Daher, in der ersten Reihe gibt es 10px weniger freien Speicherplatz zu verteilen. Das bricht die raster-Ausrichtung.

    Für die Verteilung von Raum (z.B., Sie wollen, dass ein element zu nehmen, die Verbleibende Höhe oder Breite eines Containers), verwenden Sie flex-grow.

    Für die präzise Dimensionierung der flex-Element verwenden flex-basis, width oder height.

    Hier einige weitere Infos:

    InformationsquelleAutor Michael_B
  3. 0

    Die Sie verwenden können, schwebte pseudo-block-Elemente anstelle der Polsterung, wie diese:
    (In diesem Fall 30px rechts-Polsterung)

    CSS:

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

    • Das ist eine Menge extra-mark sich für jedes element. Ich glaube nicht, dass dies eine gute Lösung.
    InformationsquelleAutor sorioz
Schreibe einen Kommentar