align-itemsプロパティ
align-itemsプロパティは、display:flex;において、初期の配置位置を指定するプロパティです。配置位置は交差軸方向、デフォルトでは縦方向の配置です。
display:flex;が設定されたエレメントの、特定の子エレメントの配置位置を単独で設定したい場合はalign-selfプロパティを使います。
display: flex; align-items: center;
関連するプロパティ
以下のような関連するプロパティがあります。
display:flex; | 複数のエレメントを緩やかに配列 |
align-content | フレックスラインの垂直方向の配置 |
align-self | フレックスアイテムの配置位置 |
justify-content | 主軸方向の並びを指定 |
flex-wrap | 横並びにしたフレックスアイテムの折り返し |
flex-basis | フレックスアイテムの基本となる幅 |
flex-direction | フレックスアイテムの縦または横の並び |
flex-flow | flex-direction、flex-wrapを一括指定 |
構文(Syntax)
CSS
align-items: stretch | center | flex-start | flex-end | baseline;
DOM(JavaScript)
object.style.alignItems
object.style.alignItems="_value_"
値(Values)
Value | 摘要 |
---|---|
stretch | 初期値(default値)。 |
center | 中心に。 |
flex-start | cross axis(交差軸)のスタート位置。 |
flex-end | cross axis(交差軸)のエンド位置。 |
baseline | ベースライン位置。 |
initial | 初期値に戻す。 |
inherit | 親エレメントのプロパティを継承。 |
備考(Remarks)
初期値(Default value) | stretch |
継承(Inherited) | no |
変化(Animatable) | no |
Example
align-itemsの例です。center値によって交差軸方向の中心にグリッドアイテム(子エレメント)が揃えられます。グリッドアイテムごとに位置を指定するにはalign-selfプロパティを使います。