css - espacio - Acolchado inferior/superior en el diseño de la caja flexible

flexbox generator

Question

Tengo un diseño de Flexbox que contiene dos elementos. Uno de ellos usa relleno de fondo :

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

El elemento azul mantiene su relación de aspecto de acuerdo con su ancho cuando se cambia el tamaño de la página. Esto funciona con Chrome e IE y se ve así:

Sin embargo, en Firefox y Edge , obtengo lo siguiente (está ignorando el relleno en el cuadro azul, que es lo que mantiene la relación de aspecto):

Soy muy nuevo en flexbox para realmente entender si esto debería funcionar o no. El objetivo de flexbox es cambiar el tamaño de las cosas, pero no estoy seguro de por qué se está ignorando el relleno intrínseco, y poniendo tamaños absolutos en el elemento azul.

¡Creo que al final ni siquiera estoy seguro de si Firefox o Chrome están haciendo lo correcto! ¿Pueden ayudar los expertos de Firefox Flexbox?

Answer 1

Actualización febrero de 2018

Firefox y Edge acordaron cambiar su comportamiento en el margen superior, inferior y relleno para los artículos flexibles (y de cuadrícula):

[...] Por ejemplo, los porcentajes izquierdo / derecho / superior / inferior se resuelven contra el ancho de su bloque contenedor en los modos de escritura horizontal. [ source ]

Esto aún no está implementado (probado en FF 58.0.2).

Actualización abril 2016

( sigue siendo válido en mayo de 2017 )

Las especificaciones se han actualizado a:

Los márgenes de porcentaje y los rellenos en los ítems flexibles se pueden resolver contra:

• su propio eje (los porcentajes izquierdo / derecho se resuelven contra el ancho, la resolución superior / inferior contra la altura), o
• el eje en línea (porcentajes izquierdo / derecho / superior / inferior todos se resuelven contra el ancho)

fuente: Módulo de diseño de caja flexible CSS Nivel 1

Esto significa que Chrome IE FF y Edge (incluso si no tienen el mismo comportamiento) siguen la recomendación de las especificaciones.

Las especificaciones también dicen:

Los autores deben evitar el uso de porcentajes en los márgenes o los márgenes de los ítems flexibles por completo, ya que obtendrán un comportamiento diferente en diferentes navegadores. [ fuente ]

Trabaja alrededor:

Puede envolver el primer elemento secundario del contenedor flexible en otro elemento y colocar el padding-bottom en el segundo elemento secundario:

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

Probé esto en los navegadores modernos (IE, Chrome, FF y Edge) y todos tienen el mismo comportamiento. Como la configuración del segundo hijo es la "misma de siempre", supongo que los navegadores más antiguos (que también admiten el módulo de diseño de flexbox ) mostrarán el mismo diseño.

Respuesta anterior:

Según las specs , Firefox tiene el comportamiento correcto

Explanantion:

A diferencia de los artículos de bloque que calculan su% de margen / relleno según el ancho de los contenedores, en los artículos flexibles:

Los márgenes de porcentaje y los rellenos en ítems flexibles siempre se resuelven contra sus dimensiones respectivas; a diferencia de los bloques, no siempre se resuelven contra la dimensión en línea de su bloque contenedor.

specs

Esto significa que el relleno-bottom / top y margin-bottom / top se calcula de acuerdo con la altura del contenedor y no el ancho como en los diseños que no son Flexbox.

Como no ha especificado ninguna altura en el elemento flexible principal, se supone que el relleno inferior del niño es 0px.
Aquí hay un fiddle con una altura fija en el elemento principal que muestra que el fondo del relleno se calcula según la altura de la display:flex; envase.

Answer 2

La respuesta aceptada es correcta, pero mejoré la solución utilizando un pseudo-elemento en lugar de agregar un nuevo elemento al HTML.

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

Answer 3

Utilicé vh en lugar de% funcionó perfectamente en Safari, Firefox y Edge

Answer 4

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