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