flex boxについて

CSS

目次

はじめに

仕様を覚えるためにできるだけ使うようにしているのがFlex BoxとGrid Layoutの二つです。 なんとなくで簡単なものは扱えても毎度毎度検索をかけて確認しているのでこのふたつについてそれぞれ記事にまとめようと思います。

今回はFrex Boxについてです。

基本的な書き方

親要素にdisplay: flex;を指定する。

.wrapper {
  display: flex;
}

横並びになります。

親要素に指定できるプロパティ

親要素に指定できるプロパティと子要素に指定できるプロパティがある。

flex-direction ・・・ 子要素の並ぶ順番

親要素に以下のように指定する。

.wrapper {
  display: flex;
  frex-direction: row-reverse;
}

四種類。

名前 説明
row(初期値) 左から右→
row-reverse 右から左←
column 上から下↓
column-reverse 下から上↑

flex-wrap ・・・ 子要素の折り返し

子要素を一行で並べるか、親要素のサイズに合わせて複数行にするかの指定。

.wrapper {
  display: flex;
  frex-wrap: wrap;
}
名前 説明
nowrap(初期値) 折り返さない
wrap 下へ並べる
wrap-reverse 上へ並べる

flex-flow ・・・ flex-directionとflex-wrapをまとめて指定

初期値はrow nowrap

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

justify-content ・・・ 水平方向の揃え位置

.wrapper {
  display: flex;
  justify-content:flex-end;
}
名前 説明
flex-start(初期値) 左揃え
flex-end 右揃え
center 左右中央揃え
space-between 最初と最後の子要素を両はしに配置、残りを均等に配置。
space-around 要素に均等に配置

align-items ・・・ 垂直方向の揃え位置

.wrapper {
  display: flex;
  align-items:flex-start;
}
名前 説明
stretch（初期値） 親要素の高さ、もしくはコンテンツの一番多い子要素に合わせる
flex-start 上揃え
flex-end 下揃え
center 上下中央
baseline 文字のベースラインで揃える

align-content ・・・ 複数行の時の揃え位置

flex-wrap: nowrap;が適用されていると無効になるため、flex-wrap: wrap;などを指定する。

.wrapper {
  display: flex;
  align-content: space-between;
}
名前 説明
stretch（初期値） 親要素の高さに合わせる
flex-start 上揃え
flex-end 下揃え
center 上下中央
space-between 最初と最後の子要素を上下端に配置、残りを均等に配置。
space-around 全ての子要素を均等に配置。

長くなってしまったので子要素に指定するプロパティは別の記事として分けます。

追記：その2です

sotoogre.hatenablog.jp