CSS3 柔軟なレイアウト align-items と align-self 垂直軸の行配置属性の詳細な説明と例_html/css_WEB-ITnose

フレックス項目は、justify-content と同様に、フレックス コンテナーの現在の行の交差軸に従って垂直方向に整列できます。 align-items 属性はフレキシブル コンテナに使用され、align-self はフレキシブル アイテムに使用されます。 align-items は、匿名フレックス項目を含むフレックスコンテナ内のすべての項目のデフォルトの配置プロパティを設定します。 align-self は、デフォルトをオーバーライドして、個々のフレックス項目の配置を設定できます。 (匿名フレックス項目の場合、align-self は常に、対応するフレックス コンテナーの align-items の値と一致します。)

フレックス項目の軸間のマージンが auto の場合、align-self 属性は効果がありません。

align-items と align-self の構文は次のとおりです:

align-self 属性が値 auto を取る場合、その親要素の align-items 値として計算されます。親要素はありません。配置属性の値は次のように定義されます:

flex-start
エラスティックアイテムのクロススタートマージンの辺は、行のクロススタートの辺の隣にあります(一般的に言えば、それは次です)フレックス コンテナーの上部に移動します)。
フレックスエンド
フレックス項目のクロスエンドマージンの辺は、行のクロスエンドの辺の隣にあります(一般的に、フレックスコンテナの底部の隣にあります)。
center
フレックス項目のマージンボックスは、行の交差軸の中央に配置されます (垂直方向の中央揃え)。 (エラスティック行のクロスサイズがエラスティックアイテムより小さい場合、両方向にオーバーフローします。)
ベースライン
エラスティックアイテムのインライン軸と縦軸(クロス軸)が一致している場合、この値はフレックススタート。それ以外の場合は、ベースラインの配置に参加します。参加しているフレックス アイテムはすべてベースラインに従って配置され、ベースラインとクロススタート マージンの間の距離が最も大きいアイテムが行のクロススタート側に配置されます (一般的に、つまり、ベースラインとコンテナーの上部の間の距離が最も大きいアイテムが上部に配置されます)。
stretch
フレックス項目のクロスサイズプロパティ（一般的に高さ）が自動で、垂直マージン（軸の交差マージン）が自動でない場合、フレックス項目はコンテナの高さに合わせて引き伸ばされ、使用される値は次のようになります。項目の外枠 (マージン ボックス) の垂直サイズを行と同じサイズにできる限り近づけ、かつ min-height/min-width/max-height/max-width プロパティの制約に従います。
注: フレックス コンテナーの高さが制限されている場合、この値により項目のコンテンツがオーバーフローする可能性があります。
フレックス項目の上部はコンテナーの上部の隣にあります。

上の図には 5 つの例が含まれており、各例にはフレックス コンテナーに異なる色の 4 つのフレックス アイテムが含まれており、一番下のフレックス アイテムにはテキスト ベースラインがあります。

この図は、これらの値の効果と違いを直感的に示しています。このプロパティは、オンラインのサンプル コードでテストできます:

http://wow.techbrood.com/fiddle/17130

by iefreer