Flexコンテナ
flex-direction -Flexアイテムの向きと方向
flex-directionプロパティはFlexアイテムの向きと方向を設定します。
指定可能な値
| 値 | 向きと方向 |
|---|---|
| row | 左から右（初期値） |
| row-reverse | 右から左 |
| column | 上から下 |
| column-reverse | 下から上 |
使用例
.flex-container {
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
}
row
row-reverse
column
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
wrap
wrap-reverse
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-end
center
space-between
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-end
center
baseline
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-start
flex-end
center
space-between
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-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-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;
}