align-self Eigenschaft in flexbox funktioniert nicht?

Ich versuche zu verstehen, flex box:
Ich will die "erste" block gestreckt entsprechend die volle Breite des browser, und der "zweite" block fester Größe und ausgerichtet auf die Links.

So habe ich align-items: flex-end im übergeordneten(<html>) und versucht zu Strecken, den ersten block mit align-self: stretch im "ersten" block.

Ist dies nicht funktioniert. Beide sind Links ausgerichtet.

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

InformationsquelleAutor Spartan | 2013-11-18

  1. 9

    Also das problem ist, dass du hast die <html> Knoten als flex-container, und die <body> Knoten (seinem Kind) ist die einzige flex-Element.

    Derzeit align-self:stretch auf #first wird ignoriert, da diese Eigenschaft gilt nur für flex-Elemente, und #first ist nicht ein flex-Element (die Art, die Sie haben, die Dinge bis jetzt).

    Zu bekommen, was Sie wollen, Sie brauchen, um die <body> Knoten ein flex-container, nicht die <html> Knoten. Also, einfach ändern Sie Ihren ersten style-Regel anwenden zu body{ statt html{

    (Auch, wenn Sie wollen #zweiter zu werden Linksbündig ausgerichtet werden, müssen Sie flex-start, nicht flex-end. Die linke Kante ist die flex-start horizontale Kante, in der Regel.)

    Danke ..Es funktioniert...
    was tun u "bedeutet" in der Regel" ? 😀
    (Ich meine, könnten Sie (zum Beispiel) legen Sie die Kante der flex-start edge mithilfe direction: rtl oder verwenden Sie die mehrere-komplexe writing-mode - Eigenschaft, um den text & flex-Container vertikal standardmäßig. Wenn Sie nicht über diese Eigenschaften, dann ein flex-container mit flex-direction: row haben den flex-start-edge-Links.)

    InformationsquelleAutor

  2. 3

    Hinzufügen flex:1 bis #erste

    Entfernen justify-content: flex-start; align-items: flex-end; von html -

    Siehe Beispiel: http://codepen.io/anon/pen/vifIr

    InformationsquelleAutor

Schreibe einen Kommentar