Padding-bottom/top dans flexbox mise en page

J'ai un flexbox disposition contenant deux éléments. L'un d'eux utilise 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>

L'élément bleu conserve ses proportions en fonction de sa largeur lorsque la page est redimensionnée.
Cela fonctionne avec Chrome et IE et ressemble :

Padding-bottom/top dans flexbox mise en page

Cependant, dans Firefox et Bord, je reçois le suivant (c'est en ignorant le rembourrage sur la boîte bleue, qui est ce qui permet de conserver les proportions):

Padding-bottom/top dans flexbox mise en page

Je suis trop nouveau pour flexbox pour vraiment comprendre si ce qui devrait ou ne devrait pas fonctionner. Le point de l'ensemble de flexbox est de redimensionner les choses, mais je ne sais pas pourquoi on est ignorant la valeur intrinsèque du rembourrage, et la mise tailles absolues sur l'élément bleu.

Je suppose que, finalement, je ne suis même pas sûr si Firefox ou google Chrome est en train de faire la bonne chose! Peut-Firefox flexbox experts de l'aide?

  • Les explications ci-dessus ont été très utiles. Pour plus de contexte et d'explication, je vous recommande de Smashing Magazine de Contenu Intégré Travail En Responsive "iFrame" (smashingmagazine.com/2014/02/...). Cet article a donné clair, concis contexte pour expliquer ce rembourrage et div wrapper solution fonctionne.
InformationsquelleAutor Simon_Weaver | 2014-05-18
  1. 99

    Mise À Jour Février 2018

    Firefox et edge ont accepté de modifier leur comportement en haut, en bas de la marge et le remplissage de flex (et la grille) éléments :

    [...] par exemple, à gauche/droite/haut/bas pourcentages de tous les résoudre à l'encontre de leur bloc contenant la largeur horizontale modes d'écriture. [source]

    Ce n'est pas encore mis en œuvre (testé sur FF 58.0.2).

    Mise à jour avril 2016

    (encore valide en mai 2017)

    Les spécifications ont été mis à jour à:

    Pourcentage des marges externes et internes sur flex éléments peuvent être résolus contre:

    • leur propre axe (à gauche/à droite pourcentages résoudre à l'encontre de la largeur, en haut/en bas à résoudre à l'encontre de hauteur), ou,
    • la ligne de l'axe gauche/droite/haut/bas pourcentages de tous les résoudre à l'encontre de largeur)

    source: CSS Flexible Zone de Mise en page au Niveau du Module 1

    Cela signifie que chrome, IE, FF et Edge (même si elles n'ont pas le même comportement) suivre les spécifications recomendation.

    Specs aussi dire:

    Auteurs devraient éviter d'utiliser des pourcentages, des remplissages ou des marges sur le flex
    les éléments entièrement, comme ils auront des comportements différents dans les différentes
    les navigateurs. [source]

    Travail autour de :

    Vous pouvez enrouler le premier enfant de la flex récipient dans un autre élément et mettre le padding-bottom sur le deuxième enfant :

    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>

    J'ai testé cela dans les navigateurs (IE, chrome, FF et Edge) et ils ont tous le même comportement. Comme la configuration de la 2ème enfant est le "comme d'habitude", je suppose que les anciens navigateurs (qui aslo soutien flexbox module de mise en page) rendra la même mise en page.

    Réponse précédente:

    Selon la spécifications, Firefox a le droit de comportement

    Explanantion :

    Contrairement à bloquer les éléments qui calculent leur % margin/padding, selon les conteneurs de largeur, sur flex éléments:

    Pourcentage des marges externes et internes sur flex articles sont toujours résolus
    à l'encontre de leurs dimensions respectives, à la différence des blocs, ils ne sont pas toujours
    résoudre à l'encontre de la ligne de la dimension de leur bloc contenant.

    source dev.w3.org

    Cela signifie que padding-bottom/top et margin-bottom/top sont calculées en fonction de la hauteur du conteneur et non pas la largeur comme en non-flexbox mises en page.

    Que vous n'avez pas précisé de quelle hauteur sur le parent flex point, le bas du rembourrage de l'enfant est censé être 0px.

    Voici une violon avec une hauteur fixe sur le parent qui montre que le rembourrage de fond est calculé en fonction de la hauteur de la display:flex; conteneur.

    • Maintenant que c'est ennuyeux, mais merci pour la réponse!
    • Salut, je suis nouveau sur flex ainsi et viens de remarquer que cela. Juste pour préciser, n'Chrome / IE ont le mauvais comportement? Cela rend l'utilisation de pourcentages avec un Rembourrage et de la Marge complètement inutile avec flex si c'est le cas!
    • c'est exacltly ce que cette réponse explique. Il existe des solutions de contournement bien que, comme ma réponse et OrganicPanda la réponse de l'expliquer.
    • merci, je commençais juste des précisions. Cependant OrganicPanda la réponse n'est pas assez bon pour moi parce que je ne peux pas faire de pseudo éléments à chaque fois que je veux utiliser un padding ou margin Flex.
    • Pour plus d'informations sur ce bug sur Firefox, il est traité ici et apparemment classés comme non VALIDE, cependant, il semble que le CSS a été mis à jour pour permettre le comportement de beaucoup d'entre nous ont été à la recherche pour. Nous avons juste besoin de assurez-vous de poser des questions maintenant 😉
    • thx pour souligner les spécifications du changement. Je vais mettre à jour cette réponse en conséquence. Je ne sais pas si cela peut être considéré comme un "bug sur firefox" comme FF suit encore les specs.
    • L'actuel CSSWG projet d'états: "gauche/droite/haut/bas pourcentages de tous les résoudre à l'encontre de leur bloc contenant la largeur"
    • Dans ce problème Edge & FF ont convenu (autour de jan 2018) pour aller avec la largeur/Clin comportement, et allez la mettre en œuvre. +1
    • merci pour cette bonne nouvelle. J'ai mis à jour la réponse.

    InformationsquelleAutor web-tiki
  2. 34

    Accepté la réponse est correcte, mais je me suis amélioré sur la solution à l'aide d'un pseudo-élément au lieu d'ajouter un nouvel élément dans le code HTML.

    Exemple: 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%;
}
    • C'est un très intelligente et non-destructive solution de contournement. À mon avis, il est également plus avantageux sur la suggestion précédente.
    • La solution parfaite! La vie de veille.
    InformationsquelleAutor OrganicPanda
  3. -2

    J'ai utilisé vh au lieu de % a parfaitement fonctionné dans Safari, Firefox & Bord

    • vh est une vue de l'unité et non par rapport à l'élément ou de son parent. Il sera dans une situation où votre élément doit être dimensionné par rapport à la fenêtre d'affichage, mais pas en général (et pas en ce qui concerne cette question).
    InformationsquelleAutor hans
  4. -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