css - spalten - flexbox responsive




Polsterung unten/oben im Flexbox-Layout (3)

Update Februar 2018

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

[...] zB die Prozentsätze links / rechts / oben / unten werden in horizontaler Schreibweise gegen die Breite des umschließenden Blocks aufgelöst. [ source ]

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 Auffüllungen für Flex-Elemente können folgendermaßen aufgelöst werden:

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

Quelle: CSS Flexible Box Layout Modul Level 1

Dies bedeutet, dass Chrome IE FF und Edge (auch wenn sie nicht das gleiche Verhalten haben) den Spezifikationen folgen.

Specs sagen auch:

Autoren sollten die Verwendung von Prozentsätzen in Padding oder Margin auf Flex-Elementen vermeiden, da sie in verschiedenen Browsern unterschiedliche Verhaltensweisen aufweisen. [ Quelle ]

Umgehen:

Sie können das erste padding-bottom Element des Flex-Containers in ein anderes Element und das padding-bottom Element in das zweite padding-bottom Element padding-bottom :

#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 das in modernen Browsern (IE, Chrome, FF und Edge) getestet und alle haben das gleiche Verhalten. Da die Konfiguration des zweiten untergeordneten Elements das "selbe wie üblich" ist, nehme ich an, dass ältere Browser (die auch das flexbox-Layoutmodul unterstützen) dasselbe Layout rendern.

Vorherige Antwort:

Laut den specs hat Firefox das richtige Verhalten

Erläuterung:

Im Gegensatz zu Blockobjekten, die ihren% margin / padding entsprechend der Containerbreite auf Flex-Elementen berechnen:

Prozentuale Ränder und Abstände bei Flex-Elementen werden immer anhand ihrer jeweiligen Abmessungen aufgelöst. Im Gegensatz zu Blöcken lösen sie nicht immer die Inline-Dimension ihres umgebenden Blocks.

specs

Dies bedeutet, dass das Padding-bottom / top und margin-bottom / top nach der Höhe des Containers und nicht wie bei Nicht-Flexbox-Layouts berechnet wird.

Da Sie auf dem übergeordneten Flex-Element keine Höhe angegeben haben, sollte das untere Padding des untergeordneten Elements 0 px sein.
Hier ist eine fiddle mit einer festen Höhe auf dem Elternteil, die zeigt, dass der Polsterboden entsprechend der Höhe des display:flex; berechnet display:flex; Container.

Ich habe ein Flexbox-Layout mit zwei Elementen. Einer von ihnen verwendet padding-bottom :

#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;
}
<div id='flexBox'>
  <div id='padding'></div>
  <div id='text'>Some text</div>
</div>

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

In Firefox und Edge bekomme ich jedoch Folgendes (es ignoriert die Auffüllung der blauen Box, die das Seitenverhältnis beibehält):

Ich bin Flexbox zu neu, um wirklich zu verstehen, ob das funktionieren sollte oder nicht. Der ganze Sinn von flexbox besteht darin, die Größe zu ändern, aber ich bin mir nicht sicher, warum es das intrinsische Padding ignoriert und absolute Größen auf das blaue Element setzt.

Ich schätze, letztendlich bin ich mir nicht einmal sicher, ob Firefox oder Chrome das Richtige tun! Kann jeder Firefox Flexbox-Experte helfen?


Die akzeptierte Antwort ist korrekt, aber ich verbesserte die Lösung, indem ich ein Pseudo-Element anstelle eines neuen Elements im HTML verwendete.

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%;
}

    <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*/;
}






aspect-ratio