Polsterung unten / oben im Flexbox-Layout

74

Ich habe ein Flexbox-Layout mit zwei Elementen. Einer von ihnen verwendet Polsterung unten :

Das blaue Element behält sein Seitenverhältnis entsprechend seiner Breite bei, wenn die Größe der Seite geändert wird. Dies funktioniert mit Chrome und IE und sieht folgendermaßen aus:

Polsterung unten in Chrom und IE auf Flexbox-Layout

In Firefox und Edge wird jedoch Folgendes angezeigt (das Auffüllen der blauen Box wird ignoriert, wodurch das Seitenverhältnis beibehalten wird):

Polsterung unten in Firefox auf Flexbox-Layout

Ich bin zu neu in der Flexbox, um wirklich zu verstehen, ob dies funktionieren sollte oder nicht. Der springende Punkt bei Flexbox ist die Größenänderung, aber ich bin mir nicht sicher, warum die intrinsische Polsterung ignoriert und dem blauen Element absolute Größen zugewiesen werden.

Ich bin mir letztendlich nicht mal sicher, ob Firefox oder Chrome das Richtige tun! Können Firefox-Flexbox-Experten helfen?

Simon_Weaver
quelle
Die obigen Erklärungen waren sehr hilfreich. Für weiteren Kontext und Erklärungen empfehle ich das Smashing Magazine "Smbedded Content in einem reaktionsschnellen iFrame funktionieren lassen" ( smashingmagazine.com/2014/02/… ). Dieser Artikel gab einen klaren, präzisen Kontext dafür, warum diese Padding- und Div-Wrapper-Lösung funktioniert.
Jess

Antworten:

104

Update September 2020

FireFox und edge haben das Verhalten aus den Spezifikationen implementiert, und Rand + Polsterung für Flex-Elemente werden beide entsprechend der Breite des enthaltenen Blocks berechnet .
Genau wie Blockelemente.

Update Februar 2018

Firefox und Edge haben vereinbart, ihr Verhalten am oberen, unteren Rand und an der Polsterung für Flex- (und Gitter-) Elemente zu ändern:

[...] zB werden die Prozentsätze für links / rechts / oben / unten im horizontalen Schreibmodus gegen die Breite des enthaltenen Blocks aufgelöst. [ Quelle ]

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

Update April 2016

( noch gültig im Mai 2017 )

Die Spezifikationen wurden aktualisiert auf:

Prozentuale Ränder und Polsterungen an flexiblen Elementen können gegen Folgendes aufgelöst werden:

  • ihre eigene Achse (linke / rechte Prozentsätze werden gegen die Breite aufgelöst, obere / untere prozentuale Auflösung gegen die Höhe) oder
  • die Inline-Achse (Prozentsätze links / rechts / oben / unten werden alle gegen die Breite aufgelöst)

Quelle: CSS Flexible Box Layout Modul Stufe 1

Dies bedeutet, dass Chrome IE FF und Edge (auch wenn sie nicht dasselbe Verhalten haben) den technischen Empfehlungen folgen.

Spezifikationen sagen auch:

Autoren sollten die Verwendung von Prozentsätzen in Auffüllungen oder Rändern für Flex-Elemente vollständig vermeiden, da sie in verschiedenen Browsern ein unterschiedliches Verhalten aufweisen. [ Quelle ]


Umgehen:

Sie können das erste untergeordnete Element des Flex-Containers in ein anderes Element einwickeln und padding-bottom das zweite untergeordnete Element hinzufügen:

Ich habe dies in modernen Browsern (IE, Chrome, FF und Edge) getestet und sie haben alle das gleiche Verhalten. Da die Konfiguration des 2. untergeordneten Elements "wie gewohnt" ist, werden ältere Browser (die auch das Flexbox-Layoutmodul unterstützen) wahrscheinlich dasselbe Layout rendern.


Vorherige Antwort:

Gemäß den Spezifikationen hat Firefox das richtige Verhalten

Erklärung:

Im Gegensatz zu Blockelementen, die ihren prozentualen Rand / ihre Polsterung entsprechend der Behälterbreite berechnen, gilt für flexible Elemente:

Prozentuale Ränder und Polsterungen an flexiblen Elementen werden immer gegen ihre jeweiligen Abmessungen aufgelöst. Im Gegensatz zu Blöcken werden sie nicht immer anhand der Inline-Dimension ihres enthaltenen Blocks aufgelöst.

Quelle dev.w3.org

Dies bedeutet, dass Polsterung unten / oben und Rand unten / oben nach der Höhe des Containers und nicht nach der Breite wie bei Layouts ohne Flexbox berechnet werden.

Da Sie für das übergeordnete Flex-Element keine Höhe angegeben haben, sollte die untere Polsterung des untergeordneten Elements 0 Pixel betragen.
Hier ist eine Geige mit einer festen Höhe am Elternteil, die zeigt, dass der Polsterboden anhand der Höhe des display:flex;Behälters berechnet wird .


Web-Tiki
quelle
@ web-tiki Hallo, ich bin auch neu im Flex und habe das gerade bemerkt. Hat Chrome / IE zur Verdeutlichung das falsche Verhalten? Dies macht die Verwendung von Prozenten mit Polsterung und Rand mit Flex völlig nutzlos, wenn dies der Fall ist!
Terence Chow
1
Weitere Informationen zu diesem Fehler in Firefox werden hier behandelt und anscheinend als UNGÜLTIG eingestuft. Es scheint jedoch, dass die CSS-Spezifikation aktualisiert wurde, um das von vielen von uns gesuchte Verhalten zu ermöglichen. Wir müssen nur sicherstellen, dass wir jetzt Fragen stellen;)
Zanona
1
Der aktuelle CSSWG-Entwurf besagt : "Links / Rechts / Oben / Unten-Prozentsätze werden alle gegen die Breite ihres enthaltenen Blocks aufgelöst"
Qtax
1
In dieser Ausgabe haben Edge & FF (um Januar 2018) vereinbart, das Verhalten width / Blink zu übernehmen, und werden es implementieren. +1
Qtax
1
@AleksandrH Ich habe der Antwort ein Update hinzugefügt. Da sowohl FF als auch Edge das gleiche Verhalten implementiert haben. Ich werde diese Antwort hier als Referenz hinterlassen.
Web-Tiki
35

Die akzeptierte Antwort ist korrekt, aber ich habe die Lösung verbessert, indem ich ein Pseudoelement verwendet habe, anstatt dem HTML ein neues Element hinzuzufügen.

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%;
}
OrganicPanda
quelle
2
Das ist eine sehr clevere und zerstörungsfreie Problemumgehung. Meiner Meinung nach ist es auch vorteilhafter als der vorherige Vorschlag.
Zanona
Perfekte Lösung! Lebensretter.
Nsilva
-3

Ich habe vh anstelle von% verwendet und in Safari, Firefox & Edge perfekt funktioniert

Hans
quelle
1
vhist eine Ansichtsfenstereinheit und nicht relativ zum Element oder seinem übergeordneten Element. Dies funktioniert in einer Situation, in der die Größe Ihres Elements relativ zum Ansichtsfenster sein sollte, jedoch nicht allgemein (und nicht in Bezug auf diese Frage).
Alpipego
-3
    <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*/;
}
Evgeny
quelle