align-content プロパティ
align-content プロパティは、エレメントのレイアウトのための display:flex; において、主軸方向に対してクロス方向の子エレメントの配置を指定するプロパティです。
主軸方向をフレックスラインといいます。
align-content プロパティは、表示しきれない場合の折返しの指定である flex-wrap プロパティと併せて使用します。
display: flex; flex-wrap: wrap; align-content: center;
display:flex; のデフォルトでは、横方向が主軸方向(フレックスライン)です。垂直方向(クロス方向)が縦方向になります。 flex-direction によってフレックスラインの方向を変更することができます。
align-itemsプロパティと似ていますが、align-itemsプロパティはフレックスアイテムを整列するプロパティです。
関連するプロパティ
以下のような関連するプロパティがあります。
display:flex; | 複数のエレメントを緩やかに配列 |
align-items | 初期の配置位置 |
align-self | フレックスアイテムの配置位置 |
justify-content | 主軸方向での配置を指定 |
flex-wrap | 横並びにしたフレックスアイテムの折り返し |
flex-basis | フレックスアイテムの基本となる幅 |
flex-direction | フレックスアイテムの縦または横の並び |
flex-flow | flex-direction、flex-wrapを一括指定 |
構文(Syntax)
CSS
align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit ;
DOM ( JavaScript )
object.style.alignContent;
object.style.alignContent=" stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit ";
値(Values)
Value | 摘要 |
---|---|
stretch | 初期値(default値)。均等に配置 |
center | 親エレメントの垂直方向の中心に配置 |
flex-start | 親エレメントの左上端から配置 |
flex-end | 親エレメントの左下端から配置 |
space-between | 親エレメントの垂直方向の両端揃え |
space-around | 親エレメントの垂直方向の均等揃え |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | stretch |
継承(Inherited) | no |
変化(Animatable) | no |