HTML/CSSを勉強し始めた頃、私が混同していたのがdisplay: blockとdisplay: flexです。
どちらも「要素を並べたり動かしたりするときに使うもの」というイメージがあり、
「結局、何が違うんだろう？」
と、最初はよく分かっていませんでした。
実際のサイト制作でも、CSSを書いてみて、
「とりあえずこれで動くかな？」
と試しながら進めることが多かったです。
今回は、架空サイト「Lumiere」を制作する中で少しずつ分かってきた、display: blockとFlexboxの違いについて整理してみます。
そもそもdisplayとは？
まず、displayはCSSのプロパティです。
要素をどのような表示形式で扱うかを指定します。
例えば、
.box {
display: block;
}
や、
.box {
display: flex;
}
のように使います。
最初はdisplay: blockやdisplay: flexを、それぞれ別の機能のように考えていました。
でも勉強していくと、
blockやflexは、displayプロパティに指定する値
だということが分かりました。
display: blockとは？
display: blockを指定すると、その要素はブロックレベルの要素として扱われます。
ブロックレベルの要素は、基本的に上から下へ積み重なっていきます。
例えば、
<div>A</div>
<div>B</div>
<div>C</div>
という要素があれば、
A
B
C
というように縦に並びます。
最初の私は、
「display: blockにすると、要素をブロック化してCSSで動かせるようにする」
くらいに考えていました。
でも、実際には、
「その要素をブロックとして扱う」
ということだと分かりました。
display: flexとは？
一方、display: flexを指定すると、その要素はFlexコンテナになります。
ここがdisplay: blockとの大きな違いです。
例えば、
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
に、
.box {
display: flex;
}
と指定します。
すると、.boxの中にある子要素をFlexboxのルールで配置できるようになります。
初期状態では、子要素は基本的に横方向に並びます。
A B C
そのため、私は最初、
「display: flexは、ブロック化した要素を横並びにするもの」
と考えていました。
でも、正確には、
「親要素をFlexコンテナにして、その中の子要素をFlexboxのルールで配置する」
ということでした。
「横並びにするためのもの」だけではなかったんですね。。。
Flexboxは「親」と「子」の関係が大切
Flexboxを使うときに重要なのが、親要素と子要素の関係です。
例えば、
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
の場合、
.box {
display: flex;
}
とすると、.boxがFlexコンテナになります。
そして、その中にあるA・B・Cの要素がFlexboxのルールに従って配置されます。
つまり、
display: flexを指定した要素そのものを動かすというより、その中にある子要素の並び方をコントロールする
というイメージが分かりやすいと思いました。
flex-directionについて
Flexboxを勉強していて、よく使ったのがflex-directionです。
.container {
display: flex;
flex-direction: row;
}
rowは横方向。
A B C
一方、
.container {
display: flex;
flex-direction: column;
}
とすると、columnは縦方向になります。
A
B
C
最初は、
「Flexbox＝横並び」
というイメージが強かったのですが、flex-directionを知ることで、
Flexboxは横並びだけではなく、子要素をどの方向に並べるかをコントロールできる
と分かりました。
justify-contentとalign-items
Flexboxでさらに混乱したのが、
justify-content
align-items
です。
最初は「どっちも中央にするためのもの？」くらいの理解でした。
実際には、それぞれ配置する方向が違います。
例えば、
.container {
display: flex;
justify-content: center;
align-items: center;
}
とすると、子要素を中央に配置できます。
ただし、justify-contentとalign-itemsの方向は、flex-directionによって変わります。
flex-direction: rowの場合は、
justify-content→ 横方向align-items→ 縦方向
となります。
一方、flex-direction: columnの場合は、
justify-content→ 縦方向align-items→ 横方向
となります。
最初はここがかなり混乱しました。
「centerって書いているのに、思った方向に動かない！」
ということが何度もありました。
なぜ思った通りに要素が動かないのか？
Flexboxを使っていて一番困ったのが、
「CSSを書いたのに、思った通りに要素が動かない」
ということでした。
例えば、
justify-content: center;
と書いたのに、
「思っていた方向の中央にならない……」
ということがあります。
そんなときは、単純にjustify-contentだけを見るのではなく、
- 親要素に
display: flexが指定されているか flex-directionは何になっているか- 主軸が縦なのか横なのか
justify-contentとalign-itemsのどちらを使うのか
などを確認する必要があります。
以前は「とりあえず書いてみて、効いたらOK」という感じでしたが、少しずつ仕組みを考えてCSSを書くようになってきました。
実際のサイト制作でFlexboxを使ってみた
今回制作した「Lumiere」では、Flexboxをかなり使いました。
特に、
- 商品を並べる
- コンテンツを横並びにする
- レスポンシブ対応でレイアウトを変更する
- 要素を中央に配置する
など、さまざまなところで使いました。
最初はよく分からなくても、実際に使ってみると、
「この親要素にdisplay: flexを指定すると、中の要素が動くんだ」
という感覚が少しずつ分かってきました。
何度も使っているうちに、最初よりはFlexboxの動きを予想できるようになったと思います。
display: blockとFlexboxの違い
ここまで勉強して、最初に混同していたdisplay: blockとdisplay: flexの違いが少し整理できました。
display: block
display: block;
→ 要素をブロックとして扱う。
基本的に、ブロックレベルの要素は縦方向に積み重なります。
display: flex
display: flex;
→ 要素をFlexコンテナにする。
その中にある子要素を、Flexboxのルールを使って配置できます。
つまり、
blockとFlexboxは「どちらも要素を動かすためのもの」というわけではありません。
blockは要素の表示形式の一つ。
flexはFlexboxというレイアウトの仕組みを使うためのもの。
という違いがあります。
今回分かったこと
今回、display: blockとdisplay: flexについて勉強して、最初の自分の理解がかなり曖昧だったことに気づきました。
最初は、
display: block＝要素をブロック化する
display: flex＝要素を横並びにする
くらいに覚えていました。
でも実際にサイトを作ってみることで、
displayは表示形式を指定するプロパティで、blockやflexはその値。
display: flexを指定すると、その要素がFlexコンテナになり、子要素をFlexboxのルールで配置できる。
ということが分かってきました。
まだFlexboxを完全に使いこなせているわけではありません。
でも、「とりあえず書いてみる」だけだった頃と比べて、
「親要素はどれ？」「子要素はどれ？」「今の主軸はどっち？」
と考えられるようになったのは大きな進歩だと思います。
まとめ
今回の勉強で覚えておきたいことをまとめます。
displayは、要素の表示形式を指定するCSSプロパティdisplay: blockは、要素をブロックとして扱うdisplay: flexを指定すると、その要素がFlexコンテナになる- Flexboxでは、親要素と子要素の関係が大切
flex-direction: rowは基本的に横方向flex-direction: columnは縦方向justify-contentとalign-itemsは、Flexboxの方向を意識して使う- Flexboxは「横並びにするだけ」の仕組みではない
まだ分からないこともありますが、実際にサイトを作りながら少しずつ理解できるようになってきました。
次は、Flexboxを使った「中央寄せ」について、いろいろな方法を整理してみたいと思います。
