Navigate
  • Hazuki

【CSS】Flexboxを使いこなす – その２ 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