【CSS】Flexboxを使いこなす – その2 Flex コンテナ(親要素)のプロパティ・続き

CSS Flexboxを使いこなす – その1 の続きです。

前回は、以下の3点についてまとめました。

今回は、以下の3点です。

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

flex-direction プロパティで指定した方向に対して、Flex アイテム(子要素)の配置を指定できます。

(デフォルト justify-content: flex-start

justify-content: flex-start(並列の場合「左揃え」、縦列の場合「上揃え」)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -webkit-box-pack: start;
 -ms-flex-pack: start;
 justify-content: flex-start;
}

サンプルページ: justify-content-flex-start.html

justify-content: flex-end(並列の場合「右揃え」、縦列の場合「下揃え」)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -webkit-box-pack: end;
 -ms-flex-pack: end;
 justify-content: flex-end;
}

サンプルページ: justify-content-flex-end.html

justify-content: center(「中央揃え」)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
}

サンプルページ: justify-content-center.html

justify-content: space-between(最初と最後のアイテムは端に、それ以外は等間隔に配置)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
}

サンプルページ: justify-content-space-between.html

justify-content: space-around(最初と最後のアイテムも含め、全てのアイテムを等間隔に配置)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -ms-flex-pack: distribute;
 justify-content: space-around;
}

サンプルページ: justify-content-space-around.html

align-items プロパティ(垂直方向の配置の指定)

全てのFlexアイテムに対して、垂直方向の配置を指定します。

(デフォルト align-items: stretch

align-items: flex-start(並列の場合「上揃え」、縦列の場合「左揃え」)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -webkit-box-align: start;
 -ms-flex-align: start;
 align-items: flex-start;
}

サンプルページ: align-items-flex-start.html

align-items: flex-end(並列の場合「下揃え」、縦列の場合「右揃え」)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -webkit-box-align: end;
 -ms-flex-align: end;
 align-items: flex-end;
}

サンプルページ: align-items-flex-end.html

align-items: center(「中央揃え」)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
}

サンプルページ: align-items-center.html

align-items: baseline(ベースラインを揃えて配置)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -webkit-box-align: baseline;
 -ms-flex-align: baseline;
 align-items: baseline;
}

サンプルページ: align-items-baseline.html

align-items: stretch(Flexアイテムの高さが指定されてない場合、一番コンテンツの多いものに高さを合わせる)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -webkit-box-align: stretch;
 -ms-flex-align: stretch;
 align-items: stretch;
}

サンプルページ: align-items-stretch.html

align-content プロパティ(行の配置)

flex-wrap プロパティで「nowrap」以外に設定した場合、複数行になります。その時の行の配置を指定します。

(デフォルト align-content: stretch

align-content: flex-start(並列の場合「上揃え」、縦列の場合「左揃え」)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -ms-flex-wrap: wrap;
 flex-wrap: wrap;

 -ms-flex-line-pack: start;
 align-content: flex-start;
}

サンプルページ: align-content-flex-start.html

align-content: flex-end(並列の場合「下揃え」、縦列の場合「左揃え」)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -ms-flex-wrap: wrap;
 flex-wrap: wrap;

 -ms-flex-line-pack: end;
 align-content: flex-end;
}

サンプルページ: align-content-flex-end.html

align-content: center(「中央揃え」)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -ms-flex-wrap: wrap;
 flex-wrap: wrap;

 -ms-flex-line-pack: center;
 align-content: center;
}

サンプルページ: align-content-center.html

align-content: space-between(最初と最後の行は端に、他の行は等間隔)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -ms-flex-wrap: wrap;
 flex-wrap: wrap;

 -ms-flex-line-pack: justify;
 align-content: space-between;
}

サンプルページ: align-content-space-between.html

align-content: space-around(最初と最後の行も含め、全ての行が等間隔)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -ms-flex-wrap: wrap;
 flex-wrap: wrap;

 -ms-flex-line-pack: distribute;
 align-content: space-around;
}

サンプルページ: align-content-space-around.html

align-content: stretch(最初の行は端に揃え、行の後に等間隔のスペース)

.flex-container {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;

 -ms-flex-wrap: wrap;
 flex-wrap: wrap;

 -ms-flex-line-pack: stretch;
 align-content: space-stretch;
}

サンプルページ: align-content-stretch.html

ここまで!

⇒  Flexbox を使いこなす – その1

⇒  Flexbox を使いこなす – その3