web-dev-qa-db-fra.com

propriété align-self dans flexbox ne fonctionne pas?

J'essaie de comprendre la boîte flexible: je veux que le "premier" bloc soit étiré pour correspondre à toute la largeur du navigateur, et le "deuxième" bloc de taille fixe et aligné à gauche.

J'ai donc utilisé align-items: flex-end dans le parent (<html>) et a tenté d'étirer le premier bloc à l'aide de align-self: stretch dans le "premier" bloc.

Cela ne fonctionne pas. Les deux sont alignés à gauche.

<html>
  <head>
    <style>
      html {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
      }

      #first {
        align-self:stretch;
        background-color: red;
        border: 3px solid black;
      }

      #second {
        background-color:green;
        width: 300px;
        height: 400px;
        border: 3px solid yellow;
      }
    </style>
  </head>
  <body>
    <div id="first">This is first</div>
    <div id="second">This is second</div>
  </body>
</html>
htmlcssflexbox
17
IhtkaS

Donc, le problème est que vous avez le <html> node en tant que conteneur flexible, et le <body> node (son enfant) est le seul et unique élément flexible.

Actuellement, align-self:stretch sur #first est ignoré, car cette propriété ne s'applique qu'aux éléments flexibles et #first est pas un élément flexible (la façon dont vous avez configuré les choses en ce moment).

Pour obtenir ce que vous voulez, vous devez faire le <body> noeud un conteneur flexible, pas le <html> noeud. Donc, changez simplement votre première règle de style à appliquer à body{ au lieu de html{

(De plus, si vous voulez que #second soit aligné à gauche, vous avez besoin de flex-start, ne pas flex-end. Le bord gauche est le flex-start Bord horizontal, généralement.)

13
dholbert

Ajouter flex: 1 à #first

Supprimer le contenu justifié: flex-start; et align-items: flex-end; de html

Voir l'exemple: http://codepen.io/anon/pen/vifIr

2
jbenjohnson