flexの基本レイアウト その2

とりあえずこれだけ。flexの超基本レイアウト」の続きです。

前回をおさらいすると、

  • flex指定すると子要素が横並び
  • grow shrinkが分からなければ、とりあえずflex-wrap:wrapにしておけ
  • flex-wrap: wrap; なら、子要素はwidthで幅決められる
  • 横配置はjustify-contentで整える

までやりましたので、今回は縦方向の整頓をやります。

flexアイテムの高さを一括調整するalign-items

flexでは「一列になるアイテム同士で最も高さのあるアイテムに合わせた高さ」になります(初期値)。

abc
def
ghi
jkl
mn
op
qr
st
uv
wx
yz

これはflexアイテムの高さを指定するalign-itemsの初期値がstretch(ストレッチ)になっている為で、align-itemsの値を変更することで変えられます。
見たほうが早いのでサンプル見て覚えてください。

align-items: flex-start


A

B

align-items: flex-end


A

B

align-items: center


A

B

align-items: stretch(初期値)


A

B

個別に高さを調整するalign-self

align-itemsではアイテムの高さを一括で指定しましたが、「1つだけalign-itemsの値を変えたい」というワガママを叶えてくれるのが、align-selfです。

これまで出てきたプロパティ(flex-wrap ・justify-content・align-items)は全て「display:flex;を指定した(親)要素」に対して指定しましたがalign-selfは「変更したいアイテム自体(子要素)」に指定します。考えれば当たり前なんですが一応注意。

指定する値の種類はalign-itemsと同じです。

例えばalign-items:stretchの中に1つだけ aling-self:centerを指定するとこうなります。


A

B
center

flexコンテナに対する縦方向の間隔を指定するalign-content

justify-contentの縦バージョンです。指定する値もjustify-contentと同じです。

align-contentを指定するためには、
flexボックスの高さが明示されており、かつflexアイテム(子要素)の合計よりも高い必要があります。

間隔を計算して隙間を作るプロパティなので、元の高さが分からなかったり隙間なく詰め込んでたりしたら駄目だよということです。

レスポンシブデザインでflexを使う場合、高さをpxなどで細かく指定するのは難しい場合もありますが、vw、vhで高さを決めれば勝手に中央寄せできるのでたまに便利です。

サンプルはflexボックスに高さを指定してjustify-content とalign-content両方にcenter指定。(place-content:center で一発指定もできる。)

sample

align-contentは正直いってあまり使わない

コンテナの高さを明示しないといけないので、正直いってalign-contentはほとんど使ったことがありません。

先程のデモのように縦横の中央寄せなら、justify-content: center; align-items: center; のほうが間違いないです。

水平方向がjustify-content なので覚え違いがないように、align-contentとalign-itemsを両方説明しておきました。

flexとmargin

まだgrow・shrink・flex・order・flex-direction・flex-basisなど残っているのですが、そこらはどちらかと言うと「基本」じゃないと思う(知らなくてもなんとかなる)ので、別記事にします。

基本編の最後にflexとmarginの使い合わせだけ紹介します。

等間隔配置したくないとき(横方向のmargin)

flexアイテムをjustify-contentで整列させると、どうしても左右どちらかに詰めるか等間隔配置になります。

たとえば基本は左詰め、最後のアイテムだけ右寄せにしたいときは、いつもどおりmargin-left:autoでいけます。

3

縦方向の間隔をあける

先ほどやったとおり、flexボックスの高さがauto以外であればalign-contentで余白をとれますが、そうでなければmargin-bottomで大丈夫です。

変に慣れないプロパティを使って混乱するよりは、知ってるプロパティで応用したら良いんじゃないかと個人的に思ってます。

1
2
3
4
5
6

では、ここまででflexの基本レイアウトはお終いです。
次からは少し踏み込んだ説明となります。

タイトルとURLをコピーしました