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

html&css

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

PR

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

html&cssWeb
独学に限界を感じたら、オンラインのプログラミングスクールへ...
  • Code ViIlage
      挫折させない本気のプログラミングスクール。学習継続率93.3%・卒業生800名以上。
  • DMM WEBCAMP
      働きながら自分のペース学んでエンジニア転職。無料カウンセリング満足度99%!
  • TECH CAMP
      無料カウンセリング満足度95%!本業に活かせる。キャリアアップにつながる。
  • TechAcademy
      現役エンジニアから学べるオンラインに特化したプログラミングスクール。
  • テックパートナーズカレッジ
      WEBシステム開発会社のノウハウが学べるオンラインスクール。14日無料体験有り!
  • \ PHP・Laravelに特化したオンラインスクール /
    yasuakiをフォローする
    codelikeなブログ

    コメント

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