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:
In Firefox und Edge wird jedoch Folgendes angezeigt (das Auffüllen der blauen Box wird ignoriert, wodurch das Seitenverhältnis beibehalten wird):
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?
quelle
Antworten:
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:
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:
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:
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:Code-Snippet anzeigen
#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 */ }
<div id='flexBox'> <div id='padding'><div></div></div> <div id='text'>Some text</div> </div>
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:
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 .quelle
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%; }
quelle
Ich habe vh anstelle von% verwendet und in Safari, Firefox & Edge perfekt funktioniert
quelle
vh
ist 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).<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*/; }
quelle