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

align-contentプロパティ

 align-contentプロパティは、display:flex;の設定でのflex-wrapプロパティと併せて使用します。フレックスラインを垂直方向に整列するプロパティです。 align-itemsプロパティと似ていますが、align-itemsプロパティはフレックスアイテムを整列するプロパティです。

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

対応ブラウザ

対応しているブラウザの一覧です。

flex用align-content

Data on support for the mdn-css__properties__align-content__flex_context feature across the major browsers

grid用align-content

Data on support for the mdn-css__properties__align-content__grid_context feature across the major browsers

Can I use...を使用しています。