親要素(flexコンテナ)のCSS

親要素をコンテナに指定

親要素をブロック要素にする場合

css

.parent{
  display:flex;
}

親要素をインライン要素にする場合

css

.parent{
  display:inline-flex;
}

子要素の並びの方向の指定(flex-directionプロパティ)

値	意味
row	左から右(初期値)
row-reverse	右から左
column	上から下
column-reverse	下から上

折り返し時のルール(flex-wrapプロパティ)

値	意味
nowrap	折り返さない(初期値) ※収まりきらない場合、子要素が縮む
wrap	折り返す(下に)
wrap-reverse	折り返す(上に)

折り返し時のルールと子要素の向きをまとめて指定(flex-flowプロパティ)]

css

.parent {
  display: flex;
  flex-flow: row wrap;
}

揃え

初期値が、伸びる設定になっているので注意が必要です。

水平方向の揃え(justify-contentプロパティ)

値	意味
flex-start	子要素をスタート揃え(初期値)
flex-end	子要素をエンド揃え
center	子要素を中央揃え
space-between	最初と最後の子要素を左右の端に配置し、残りの要素は均等に配置
space-around	両端にも間隔が発生　両端の間隔は他の半分

※スタート揃えは、flex-directionがrowの場合「左」、row-reverseの場合「右」、columnの場合「上」、column-reverseの場合「下」に揃えます。エンド揃えはその逆です。
※space-xxxは、最終行の子要素が他の行より少ない時でも均等に配置されてしまう罠があります。

垂直方向の揃え(align-contentプロパティ)

値	意味
stretch	親要素の高さに合わせて広げて配置(初期値)
flex-start	子要素をスタート揃え
flex-end	子要素をエンド揃え
center	子要素を中央揃え
space-between	最初と最後の子要素を上下の端に配置し、残りの要素は均等に配置
space-around	両端にも間隔が発生　両端の間隔は他の半分

行、列の中での揃え(align-itemsプロパティ)

子要素の高さが異なる場合のルールを決めます。

値	意味
stretch	親要素の高さか、一番大きい子要素の高さに合わせて広げて配置(初期値)
flex-start	スタート揃え
flex-end	エンド揃え
center	中央揃え
baseline	ベースライン揃え

上下左右中央揃え

Flexboxを使うと、簡単に実現できます。

css

.parent{
  display: flex;
  align-items:center;
  justify-content: center;
}

子要素(flexアイテム)のCSS

順序の指定(orderプロパティ)

数値のみ指定可能で、初期値は0です。(マイナス値も有効)

子要素の伸びる比率(flex-growプロパティ)

親要素に余ったスペースがあった場合、指定のある子要素が他の子要素に対してどれくらい伸びるかを指定します。
数値のみ指定可能で初期値は0です。(マイナス値は無効)

子要素の縮む比率(flex-shrinkプロパティ)

親要素に子要素が入り切らない場合、指定のした子要素が他の子要素に対してどれくらい縮むかを指定します。
数値のみ指定可能で初期値は1です。(マイナス値は無効)

子要素のベースとなる幅の指定(flex-basisプロパティ)

初期値は autoです。
幅や高さの指定と同じく、パーセンテージやピクセル値で指定できます。

flex-grow、flex-shrink、flex-basisをまとめて指定(flexプロパティ)]

初期値は 0 1 autoです。

子要素の垂直方向の揃え(align-selfプロパティ)

親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定します。
親要素の align-items より優先されます。

値	意味
auto	親要素の align-itemsの指定を継承(初期値)
stretch	親要素の高さか、一番大きい子要素の高さに合わせて広げて配置
flex-end	エンド揃え
center	中央揃え
baseline	ベースライン揃え

Flexboxのコードジェネレーター

Flex