web-dev-qa-db-ja.com

flexboxのalign-selfプロパティが機能していませんか？

フレックスボックスを理解しようとしています。「最初の」ブロックをブラウザの全幅に合わせて引き伸ばし、「2番目」のブロックを固定サイズで左揃えにします。

そのため、親（align-items: flex-end）で<html>を使用し、「最初の」ブロックでalign-self: stretchを使用して最初のブロックをストレッチしようとしました。

これは機能していません。どちらも左揃えです。

<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

したがって、問題は<html>ノードがフレックスコンテナーとしてあり、<body>ノード（その子）が唯一のフレックスアイテムであることです。

現在、align-self:stretchの#firstは無視されます。そのプロパティはフレックスアイテムにのみ適用され、#firstはnotフレックスアイテム（設定方法）であるためです。今すぐ）。

必要なものを取得するには、<body>ノードをフレックスコンテナーにするnot<html>ノードにする必要があります。したがって、最初のスタイルルールを変更して、body{ではなくhtml{に適用します。

（また、＃secondを左揃えにしたい場合は、flex-startではなくflex-endが必要です。通常、左端はflex-start水平端です。）

13
dholbert

#firstにflex：1を追加します

Justify-content：flex-startを削除します。およびalign-items：flex-end; HTMLから

例を参照してください： http://codepen.io/anon/pen/vifIr

2
jbenjohnson