flex boxについて(その2)

CSS

目次

はじめに

flex boxについてまとめています。 以下の記事の続きです。

sotoogre.hatenablog.jp

前回はflex boxの基本的な使い方と、親要素に指定できるプロパティについてまとめました。 今回は子要素に指定できるプロパティについてまとめます。

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

これから紹介するプロパティに関して、親要素にdisplay: flex;が指定されていることが必須条件。

order ・・・ 子要素の順番

orderを指定することで子要素を並び替えられる。

初期値は0。マイナスの値も指定可能です。

.a { order: 1; }
.b { order: 2; }
.c { order: -1; }

どのサイトをみても分かりづらかったのですが、子要素がいくつあろうと全ての子要素の初期値は0です。

たとえば以下のように一つ目の子要素にorder:1;を指定した場合、他の子要素は0なのでその後ろに移動します。

flex-grow ・・・ 子要素の伸びる比率

親要素にスペースが余っている場合、子要素をどの程度伸びるかを指定できます。

初期値は0。マイナス値は使用できません。

.a { flex-grow: 1; }
.b { flex-grow: 2; }
.c { flex-grow: 3; }

flex-growの計算方法は、指定した数値の合計で、あまりのスペースを割っているようです。

目で見てわかる範疇でもなさそうなので、感覚をつかんで確認しながら使うしかないかなーという印象。

flex-shrink ・・・ 子要素の縮む比率

flex-growとは逆でスペースが無く、全ての子要素が入りきらない場合にどの程度縮めるかを指定できます。

初期値は1。マイナス値は使用できません。

.a { flex-shrink: 1; }
.b { flex-shrink: 2; }
.c { flex-shrink: 3; }

このあたりは計算方法がなかなかややこしいので試しながら使って行くしかなさそう。

flex-boxの計算について、2016年の記事ですが以下のブログにわかりやすく書かれていました。

memowomome.hatenablog.com

flex-basis ・・・ 子要素のベースとなる横幅を指定

widthに近いイメージです。

初期値はauto。pxや%の指定も可能です。

.a { flex-basis: auto; }
.b { flex-basis: 100px; }
.c { flex-basis: 80%; }

flex ・・・ flex-grow、flex-shrink、flex-basisをまとめて指定

.a {
  flex: 2 1 20%;
}

align-self ・・・ 子要素の垂直方向の位置

align-itemsよりこちらが優先される。

名前 説明
auto(初期値) 親要素の align-items の値を継承
stretch 親要素の高さ、または一番コンテンツの多い子要素に合わせる
flex-start 上揃え
flex-end 下揃え
center 中央揃え
baseline ベースラインで揃える

以上です。

まだ細かい仕様など、書けていないものもあるのでそちらもいつかまとめたいですね。