CSSテックラボ

Flexboxのプロパティ紹介

2016年4月27日

Flexコンテナ

flex-direction -Flexアイテムの向きと方向

flex-directionプロパティはFlexアイテムの向きと方向を設定します。

指定可能な値
向きと方向
row 左から右(初期値)
row-reverse 右から左
column 上から下
column-reverse 下から上
使用例
.flex-container {
-webkit-flex-direction: row; /* Safari */
flex-direction:         row;
}
row

flex_flex_direction_row

row-reverse

flex_flex_direction_row_reverse

column

flex_flex_direction_column

column-reverse

flex_flex_direction_column_reverse

flex-wrap -Flexアイテムの折り返し

flex-wrapプロパティはFlexアイテムの折り返しを設定します。
Flexアイテムの合計の幅がFlexコンテナの幅を超えると、Flexアイテムの幅が自動的に縮小されますが、flex-wrapプロパティで折り返しのルールを設定できます。

指定可能な値
説明
nowrap 折り返さない(初期値)
wrap 下へ折り返す
wrap-reverse 上へ折り返す
使用例
.flex-container {
-webkit-flex-wrap: nowrap; /* Safari */
flex-wrap:         nowrap;
}
nowrap

flex_flex_wrap_nowrap

wrap

flex_flex_wrap_wrap

wrap-reverse

flex_flex_wrap_wrap_revserse

flex-flow -ショートハンド

flex-flowプロパティはflex-directionとflex-wrapをまとめて設定するショートハンドです。

flex-flow: column wrap;
.flex-container {
-webkit-flex-flow: column wrap; /* Safari */
flex-flow:         column wrap;;
}

justify-content -Flexアイテム同士の余白の調整

justify-contentプロパティはFlexアイテム同士の余白の調整をします。
Flexアイテムの配置には左揃え、右揃え、中央揃え、均等配置などがあります。

指定可能な値
説明
flex-start 左揃え(初期値)
flex-end 右揃え
center 中央揃え
space-between 均等配置
space-around 均等配置(先端・終端にも余白)
.flex-container {
-webkit-justify-content: flex-start; /* Safari */
justify-content:         flex-start;
}
flex-start

flex_justify_content_flex_start

flex-end

flex_justify_content_flex_end

center

flex_justify_content_center

space-between

flex_justify_content_space_between

space-around

flex_justify_content_space_around

align-items -Flexアイテムの垂直揃え

align-itemsプロパティはFlexアイテムを垂直方向で揃えます。

指定可能な値
説明
flex-start 横配置の場合は上揃え、縦配置の場合は左揃え(初期値)
flex-end 横配置の場合は下揃え、縦配置の場合は右揃え
center 中央揃え
baseline ベースライン揃え
stretch 要素全体を等幅で揃える
.flex-container {
-webkit-align-items: stretch; /* Safari */
align-items:         stretch;
}
flex-start

flex_align_items_flex_start

flex-end

flex_align_items_flex_end

center

flex_align_items_center

baseline

flex_align_items_baseline

stretch

flex_align_items_stretch

align-content -複数行のFlexアイテムの揃え方

align-contentプロパティはFlexアイテムが複数行になったときの揃え方を設定します。このプロパティはflexアイテムが複数行の際に有効になるので、flex-wrapプロパティの値をno-wrap以外に設定する必要があります。

指定可能な値
説明
stretch 全体幅(初期値)
flex-start 横配置の場合は上揃え、縦配置の場合は左揃え
flex-end 横配置の場合は下揃え、縦配置の場合は右揃え
center 中央
space-between 均等配置
space-around 均等配置(先端・終端にも余白)
.flex-container {
-webkit-align-content: stretch; /* Safari */
align-content:         stretch;
}
stretch

flex_align_content_stretch

flex-start

flex_align_content_flex_start

flex-end

flex_align_content_flex_end

center

flex_align_content_center

space-between

flex_align_content_space_between

space-around

flex_align_content_space_around

Flexアイテム

flex-grow -Flexアイテムの伸長率

flex-growプロパティは、Flexアイテムの伸長係数(伸びる倍率)を設定します。
Flexコンテナに空いた空間がある場合、Flexアイテム毎のflex-growプロパティの値を元に、余白をうめるように自動的に広さが調整されます。

値に指定できるのは単位を含めた数値で、マイナスの値は無効です。
デフォルト値は0になります。

div{
-webkit-flex-grow: 0;
flex-grow: 0;
}
div:first-child{
-webkit-flex-grow: 3;
flex-grow: 3;
}
DIVの最初の要素のflex-growを

flex_flex_shrink

flex-shrink -Flexアイテムの萎縮率

flex-shrinkプロパティは、Flexアイテムの縮短係数(縮む倍率)を設定します。
FlexコンテナがFlexアイテムを格納しきれない場合、Flexアイテム毎のflex-shrinkプロパティの値を元に、自動的に縮む割合が調整されます。
Flexアイテムが折り返す設定の際はflex-shrinkプロパティは効果がありません。flex-wrapプロパティの値がnowrapの際に有効になります。

デフォルトで全てのFlexアイテムは縮小しますが、flex-shrinkプロパティの値が0の場合は、オリジナルのサイズが維持されます。

値に指定できるのは単位を含めた数値で、マイナスの値は無効です。
デフォルト値は0になります。

div{
-webkit-flex-shrink: 3;
flex-shrink: 3;
}
div:first-child{
-webkit-flex-shrink: 0;
flex-shrink: 0;
}

flex_flex_shrink

flex-basis -Flexアイテムの基準幅

flex-basisプロパティは、Flexアイテムの基準幅を設定します。

値に指定できるのは単位を含めた数値で、マイナスの値は無効です。
デフォルト値はautoになります。

指定可能な値
説明
auto 自動的に調整(初期値)
数値 単位を含めた数値

align-self -個々のFlexアイテムの垂直揃え

align-itemsプロパティと同じでFlexアイテムを垂直方向で揃えますが、align-selfプロパティは個々のFlexアイテムに対して設定します。

指定可能な値
説明
auto 自動(初期値)
親要素のalign-itemsの値を元に計算します。
flex-start 横配置の場合は上揃え、縦配置の場合は左揃え
flex-end 横配置の場合は下揃え、縦配置の場合は右揃え
center 中央揃え
baseline ベースライン揃え
stretch 要素全体を等幅で揃える
.flex-item {
-webkit-align-self: flex-start; /* Safari */
align-self:         flex-start;
}

order -Flexアイテム個々の並び順

orderプロパティは、Flexアイテムの個々の順番を設定します。
デフォルトの値は0です。

.flex-item {
-webkit-order: 1; /* Safari */
order:         1;
}

flex

flex-grow、flex-shrink、flex-basisのショートハンドです。

デフォルトの値は 0 1 auto です。

.flex-item {
-webkit-flex: 0 1 auto; /* Safari */
flex:         0 1 auto;
}

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!