[css]flexboxの使い方を再確認してまとめる

CSS

flexboxを使って、画面を作ることがあったので、
今まで、ググりながらなんとなく使っていたflexのプロパティについてそれぞれ確認してみました。

flexbox?

cssで要素の並び順や位置を自由に指定できるものです。
親要素にdisplay:flexを指定して、子要素を横並びや、左寄せ・中央寄せ・右寄せなどが簡単にできるようになっています。

flexを使う

いろいろな並び順をcodepenで検証してみました。

子要素を横並びにする

子要素を横並びにするには、display:flexを親要素に指定すると並んでくれます。
横位置は左寄せになります。

display:flex;

See the Pen
flexbox test1(display:flex;)
by yasuaki (@include777)
on CodePen.

子要素を縦並びにする

子要素を縦並びにするには、display:flexを親要素に指定して、
さらにflex-directionをcolumnに指定します。
デフォルトではflex-directionがrowになっているので、横配置ですが、columnに指定すると縦配置になります。

display:flex;
flex-direction: column;

See the Pen
flexbox test2(flex-direction:column;)
by yasuaki (@include777)
on CodePen.

横並び要素(flex-direction:row)の縦位置を指定する

横並び要素での縦位置を検証してみました。
flex-directionが行(row)か列(column)で、挙動が変わるようでした…

並び順が行(row)の場合に使いそうなものを、このcodepenにまとめました。

See the Pen
flexbox test3(align-items)
by yasuaki (@include777)
on CodePen.

上下中央配置

縦位置を上下中央に配置するには、align-items:centerを指定します。

display:flex;
align-items: center;

上寄せして配置

縦位置を上に配置するには、align-items:flex-startを指定します。

display:flex;
align-items: flex-start;

下寄せして配置

縦位置を下に配置するには、align-items:flex-endを指定します。

display:flex;
align-items: flex-end;

子要素の縦方向を伸ばして配置

縦位置を伸ばして配置するには、align-items:stretchを指定します。

子要素に高さ(height)の値を指定していると効かないので、注意が必要です。
display:flex;
align-items: stretch;

子要素のコンテンツ位置を揃えて配置

baselineを指定すると、子要素のコンテンツ位置を揃えて、上寄せにしてくれるようです。

display: flex;
align-items: baseline;  
baselineって、flex-startと同じなの??

と思って調べてみると、前述のように要素の位置をいい感じにしてくれるようでした。
調べてみると、この辺に書いていました。

横並び要素(flex-direction:row)の横位置を指定する

横並び要素での横位置を検証してみました。
justify-contentに値を設定すると並び位置を決めれます。

See the Pen
flexbox test5(justify-content)
by yasuaki (@include777)
on CodePen.

左右中央配置

左右中央に配置するには、justify-content: centerを指定します。

display:flex;
justify-content: center;

左寄せして配置

左寄せ配置するには、justify-content: flex-startを指定します。

display: flex;
justify-content: flex-start;

右寄せして配置

右寄せ配置するには、justify-content: flex-endを指定します。

display: flex;
justify-content: flex-end;

等間隔で配置(開始と終了に余白)

等間隔で配置するには、justify-content: space-aroundを指定します。
space-aroundを使って等間隔に並べた場合は最初と最後に余白が入ります。

display: flex;
justify-content: space-around;

等間隔で配置(開始と終了の余白なし)

等間隔で配置するもう一つの方法が、justify-content: space-betweenを指定します。
space-betweenを使って等間隔に並べた場合は余白が入りません。

display: flex;
justify-content: space-between;

縦並び要素(flex-direction:column)の縦位置を指定する

縦並び要素での縦位置を検証してみました。
flex-directionが列(column)にして、justify-contentの挙動を検証してみました。

行の時は、横位置が変わっていましたが、列の時は横位置が変わるようです。

See the Pen
flexbox test6(justify-content)[direction:column]
by yasuaki (@include777)
on CodePen.

上下中央配置

上下中央に配置するには、justify-content: centerを指定します。

display:flex;
flex-direction: column;
justify-content: center;

上寄せして配置

上寄せ配置するには、justify-content: flex-startを指定します。

display: flex;
flex-direction: column;
justify-content: flex-start;

下寄せして配置

下寄せ配置するには、justify-content: flex-endを指定します。

display: flex;
flex-direction: column;
justify-content: flex-end;

縦に等間隔で配置(開始と終了に余白)

縦に等間隔で配置するには、justify-content: space-aroundを指定します。
行の時と同じで、flex-aroundは開始終了に余白が入ります。

display: flex;
flex-direction: column;
justify-content: space-around;

縦に等間隔で配置(開始と終了の余白なし)

縦に等間隔で配置するもう一つの方法がjustify-content: space-betweenを指定します。
行の時と同じで、こちらは余白が入りません。

display: flex;
flex-direction: column;
justify-content: space-between;

縦並び要素(flex-direction:column)の横位置を指定する

縦並び要素での横位置を検証してみました。
flex-directionが列(column)にして、align-itemsの挙動を検証してみました。
行の時は、縦位置が変わっていましたが、列の時は横位置が変わるようです。

このcodepenにまとめました。

See the Pen
flexbox test4(align-items)[direction:column]
by yasuaki (@include777)
on CodePen.

左右中央配置

縦並び要素で左右中央配置するにはalign-items: centerを指定します。

display:flex;
align-items: center;

左寄せして配置

縦並び要素で左寄せにするにはalign-items: flex-startを指定します。

display:flex;
align-items: flex-start;

右寄せして配置

縦並び要素で右寄せにするにはalign-items: flex-endを指定します。

display:flex;
align-items: flex-end;

子要素の横方向を伸ばして配置

縦並び要素で横いっぱいに伸ばすにはalign-items: stretchを指定します。

子要素に幅(width)の値を指定していると効かないので、注意が必要です。
display:flex;
align-items: stretch;

ベースラインは効かない??

縦並び要素でbaselineを使ってみましたが、効いていないようでした…
うーん.. よくわからない…🤔

display:flex;
align-items: baseline;

その他、flexでいろいろやってみる

上下左右中央に配置する

上下中央に配置する場合は、上記で使ったalign-itemsとjustify-contentをcenterにします。

display: flex;
justify-content: center;
align-items:center;

See the Pen
flex test7
by yasuaki (@include777)
on CodePen.

四隅に配置する

四隅に配置する場合はこんな感じで、一つ階層を深くして、一つ目をspece-betweenで左右に配置して
二つ目を上下にspece-betweenすれば上手く配置できます。

<div id="flex_test">
  <div class="two_box">
    <div class="box"><i class="fas fa-crow fa-2x"></i></div>
    <div class="box"><i class="fas fa-dog fa-2x"></i></div>
  </div>
  <div class="two_box">
    <div class="box"><i class="fas fa-horse fa-2x"></i></div>
    <div class="box"><i class="fas fa-crow fa-2x"></i></div>
  </div>
</div>
#flex_test {
  display: flex;
  justify-content: space-between;
  align-items:center;
  height:100%;
  background: gray;
}

.two_box {
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
}

See the Pen
flex test8
by yasuaki (@include777)
on CodePen.

子要素を折り返すか折り返さないか(flex-wrap)

並べた子要素を折り返すか折り返さないかはflex-wrapで指定できます。

  • flex-wrap:nowrap => 折り返さない
  • flex-wrap:wrap => 折り返す
  • flex-wrap: wrap-revers => 逆にして折り返す

試してみました。

See the Pen
KKzZqBO
by yasuaki (@include777)
on CodePen.

終わりに

tableやfloatでレイアウトしていた頃に比べたら、簡単にタグを並べたりできるのでいいですね..
まだよく理解できてない箇所が多々あるので、今後も発見があればこの記事を更新したいと思います…🤯

コメント

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