備忘録的プログラミングリファレンス

align-content プロパティ

 align-content プロパティは、エレメントのレイアウトのための display:flex; において、主軸方向に対してクロス方向の子エレメントの配置を指定するプロパティです。
 主軸方向をフレックスラインといいます。

 align-content プロパティは、表示しきれない場合の折返しの指定である flex-wrap プロパティと併せて使用します。

フレックスアイテムを垂直方向の中心に
display: flex;
flex-wrap: wrap;
align-content: center;

詳しくは Example を参照してください

 display:flex; のデフォルトでは、横方向が主軸方向(フレックスライン)です。垂直方向(クロス方向)が縦方向になります。 flex-direction によってフレックスラインの方向を変更することができます。

 align-itemsプロパティと似ていますが、align-itemsプロパティはフレックスアイテムを整列するプロパティです。

ページ内 Index

構文(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

Example