flexboxを使ってみる！

こんにちは。ヤマウチです。
いよいよ今週末が修了式です。チラホラと同じクラスの方から良いお知らせを聞いたり、食事のお誘いの連絡があります。クラスの方と一気にお会いできる機会がこれが最後かと思うと寂しい気もしますね。

本日、実習15日目。
前回に引き続き整骨院サイトのコーディングです。
トップページのコーディング途中でアドバスいただいた中で、flexboxのお話しがありましたので今日はその内容をまとめたいと思います。

flexboxって何だろう

flexboxとはFlexible Box Layout Moduleのことで、親要素に簡単な指示を書くだけで、子要素に色んなレイアウト調整ができるものです。そしてfloatに代わる横並びスタイル記述方法として定着しつつあるそうです。

flexboxの基本的な使い方

とっても簡単で、親要素にdisplay:flexを入れてあげるだけなんです！

html
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>

css
.container{
display:flex:
}

こんな風に表示されます。

親要素にdisplay:flexを入れると、親要素はflexコンテナーとなり、子要素は自動的にflexboxアイテムになります。floatは理解するのに時間がかかってたけど、flexboxはシンプルで簡単に感じます。

flexboxアイテムの折り返し

今後、よく使いそうな指定の仕方があったので紹介したいと思います。
先ほどの親要素にdisplay:flexを入れ、子要素flexboxアイテムは横に1行に並んでいるだけなんです。

子要素「item」を倍に増やしてみました。

これを4つ目で折り返すためには、flex-wrap:wrapを親要素に追加します。
分かりやすくサイズ入れています。

html
<div class="container2">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>

css
.container2{
display:flex;
flex-wrap: wrap;
width:300px;
}

すると、自動で折り返してくれてます！

便利ですね！まだいろいろ使い方が沢山あるみたいなので、必要に応じて使っていこうと思います！

では、ヤマウチでした！