Padding-bottom/top in flexbox-layout

Ich habe eine flexbox-layout enthält zwei Elemente. Einer von Ihnen verwendet padding-bottom :

CSS:

#flexBox {
  border: 1px solid red;
  width: 50%;
  margin: 0 auto;
  padding: 1em;
  display: flex;
  flex-direction: column;
}
#text {
  border: 1px solid green;
  padding: .5em;
}
#padding {
  margin: 1em 0;
  border: 1px solid blue;
  padding-bottom: 56.25%; /* intrinsic aspect ratio */
  height: 0;
}

HTML:

<div id='flexBox'>
  <div id='padding'></div>
  <div id='text'>Some text</div>
</div>

Blauen element behält das Seitenverhältnis entsprechend seiner Breite, wenn die Seite geändert wird.
Dies funktioniert mit Chrome und IE und sieht wie folgt aus :

Padding-bottom/top in flexbox-layout

Jedoch in Firefox und Edge, bekomme ich die folgende (es ignoriert die Polsterung auf der blauen box, die ist, was behält das Seitenverhältnis):

Padding-bottom/top in flexbox-layout

Ich bin zu neu, um flexbox, um wirklich zu verstehen, wenn dies sollte oder nicht funktionieren sollte. Der springende Punkt bei der flexbox ist, um die Größe der Dinge, aber ich bin mir nicht sicher, warum es ist, ignorieren die intrinsische Polsterung und absolute Größen auf das Blaue element.

Ich denke, schließlich bin ich auch nicht sicher, ob Firefox oder Chrome tut das richtige! Kann jeder Firefox-flexbox-Experten helfen?

Die obigen Erklärungen waren sehr hilfreich. Für weitere Kontext und Erklärung, ich empfehle das Smashing Magazine ' s "Making Embedded Content Arbeiten In Einem Responsive iFrame" (smashingmagazine.com/2014/02/...). Dieser Artikel hat einen klaren, präzisen Kontext, warum das padding und div-wrapper-Lösung funktioniert.

InformationsquelleAutor Simon_Weaver | 2014-05-18

100

Update Februar 2018

Firefox und edge haben vereinbart, Ihr Verhalten zu ändern, auf top, bottom margin und padding für die flex (und raster) Artikel :

[...] z.B. Links/rechts/oben/unten Prozentsätze aller Entschlossenheit gegen Ihre mit block Breite in horizontaler schreiben-Modi. [Quelle]

Dies ist noch nicht implementiert (getestet auf FF 58.0.2).

Update april 2016

(immer noch gilt im Mai 2017)

Den specs haben aktualisiert wurden zu:
Prozentualen Margen und Polster auf flex-items gelöst werden können, entweder gegen:
- Ihre eigene Achse (Links/rechts Prozentsätze Entschlossenheit gegen Breite, oben/unten Entschlossenheit gegen die Höhe), oder,
- die inline-Achse (Links/rechts/oben/unten Prozentsätze aller Entschlossenheit gegen Breite)
Quelle: CSS Flexible Box Layout Module Level 1

Dies bedeutet, dass chrome, IE, FF und Edge (auch wenn Sie nicht das gleiche Verhalten), Folgen die Spezifikationen aussprechen.

Specs auch sagen:

Autoren sollten vermeiden Sie die Verwendung von Prozentangaben in Polstern oder Ränder auf flex
Elemente vollständig, da Sie ein anderes Verhalten in verschiedenen
Browser. [Quelle]

Umgehen :

Können Sie wickeln das erste Kind der flex-container in einem anderen element, und setzen Sie die padding-bottom auf das zweite Kind :

CSS:
```
#flexBox {
  border: 1px solid red;
  width: 50%;
  margin: 0 auto;
  padding: 1em;
  display: flex;
  flex-direction: column;
}
#text {
  border: 1px solid green;
  padding: .5em;
}
#padding {
  margin: 1em 0;
  border: 1px solid blue;
}
#padding > div {
  padding-bottom: 56.25%; /* intrinsic aspect ratio */
}
```
HTML:
```
<div id='flexBox'>
  <div id='padding'><div></div></div>
  <div id='text'>Some text</div>
</div>
```
Getestet habe ich diese in modernen Browsern (IE, chrome, FF und Edge) und Sie haben alle das gleiche Verhalten. Da die Konfiguration des 2. Kindes ist das "gleiche wie immer" ich nehme an, dass ältere Browser (aslo support-flexbox-layout-Modul) machen das gleiche layout.

Vorherigen Antwort:

Nach der Spezifikationen, Firefox hat das richtige Verhalten

Explanantion :

Anders als block-Elemente, die berechnen Ihre % margin/padding entsprechend der Container Breite, flex-Elemente:

Prozentualen Margen und Polster auf flex-Elemente werden immer gelöst
gegen Ihre jeweiligen Dimensionen; im Gegensatz zu Blöcken, Sie nicht immer
Entschlossenheit gegen die inline-dimension des enthaltenden Blocks.

Quelle dev.w3.org

Dies bedeutet, dass padding-bottom/top und margin-bottom/top) errechnet sich nach der Höhe des Containers und nicht die Breite wie in nicht-flexbox-layouts.

Da Sie nicht angegeben haben, in beliebiger Höhe auf das übergeordnete flex-Element der unteren Polsterung des Kindes sein soll 0px.

Hier ist ein fiddle mit einer festen Höhe an den Elternteil, der zeigt, dass padding-bottom berechnet sich nach der Höhe des display:flex; container.
- Nun, das ist ärgerlich, aber danke für die Antwort!
- Hi ich bin neu in der flex, wie gut und einfach dies aufgefallen. Nur um zu klären, tut Chrome / IE falsch Verhalten? Dies macht den Umgang mit Prozenten, mit Padding und Margin völlig nutzlos, mit der flex ist dies der Fall!
- das ist exacltly, was diese Antwort erklärt. Es gibt Möglichkeiten, obwohl, wie meine Antwort und OrganicPanda Antwort erklären.
- danke ich war immer nur der Klarstellung. Allerdings OrganicPanda die Antwort ist nicht gut genug für mich ist, weil ich nicht pseudo-Elemente jedes mal, wenn ich verwenden möchten, ein padding oder margin-mit Flex.
- Für weitere Informationen über diesen Fehler bei Firefox, es ist behandelt hier und offenbar als UNGÜLTIG eingestuft, aber es scheint, dass die CSS-Spezifikation wurde aktualisiert, damit das Verhalten sich viele von uns waren auf der Suche für. Wir müssen nur sicherstellen, dass Fragen jetzt 😉
- thx für den Hinweis auf die Spezifikationen zu ändern. Ich werde aktualisieren diese Antwort entsprechend. Noch weiß ich nicht, ob das als "bug bei firefox" als FF folgt noch die specs.
- Die aktuellen CSSWG Entwurf states: "Links/rechts/oben/unten Prozentsätze aller Entschlossenheit gegen Ihre mit block Breite"
- In dieses Problem Edge & FF vereinbart haben (um jan 2018) gehen mit der Breite/Blink Verhalten, und gehen, um es zu implementieren. +1
- thx für diese gute Nachricht. Ich habe aktualisiert die Antwort.
InformationsquelleAutor web-tiki

Die akzeptierte Antwort ist richtig, aber ich verbesserte mich auf die Lösung mit einem pseudo-element anstelle von hinzufügen ein neues element in der HTML.

Beispiel: http://jsfiddle.net/4q5c4ept/

HTML:

<div id='mainFlexbox'>
  <div id='videoPlaceholder'>
    <iframe id='catsVideo' src="//www.youtube.com/embed/tntOCGkgt98?showinfo=0" frameborder="0" allowfullscreen></iframe>
  </div>
  <div id='pnlText'>That's cool! This text is underneath the video in the HTML but above the video because of 'column-reverse' flex-direction.    </div>
</div>

CSS:

#mainFlexbox {
  border: 1px solid red;
  width: 50%;
  margin: 0 auto;
  padding: 1em;
  display: flex;
  flex-direction: column-reverse;
}
#pnlText {
  border: 1px solid green;
  padding: .5em;
}
#videoPlaceholder {
  position: relative;
  margin: 1em 0;
  border: 1px solid blue;
}
#videoPlaceholder::after {
  content: '';
  display: block;
  /* intrinsic aspect ratio */
  padding-bottom: 56.25%;
  height: 0;
}
#catsVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Das ist eine sehr kluge und non-destruktiv umgehen. Meiner Meinung nach ist es auch vorteilhafter gegenüber der vorherigen Vorschlag.
Perfekte Lösung! Life saver.

InformationsquelleAutor OrganicPanda

-2

Ich verwendet, vh anstelle von % perfekt funktioniert in Safari, Firefox & Edge
- vh ist ein viewport-Einheit und nicht in Bezug auf das element oder seine Eltern. Es funktioniert in einer situation, wo Sie Ihr element so groß sein sollte, relativ zum viewport, aber nicht im Allgemeinen (und nicht in Bezug auf diese Frage).
InformationsquelleAutor hans

-2

    <div class="flex-parent">
      <div class="flexchild">
        <div class="pad"></div>
      </div>
    </div>  

.flex-child{
   height:100%;
}
.padd{
   padding-top:100% /* write 100%, or instead your value*/;
}

InformationsquelleAutor Evgeny

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Update Februar 2018

Umgehen :

Explanantion :