今回から数回に分けてflexboxについて学習していくよー！
flexboxってなぁに？何ができるの？
また新しい用語が…💦
説明するより例を見てもらう方がわかりやすいんだけど、flexboxを使うと下の図のように良く見るレイアウトを作ることが簡単に作る事ができるんだ
ちなみにflexboxを使わないとこのような感じになります
全然違う！
スッキリしていないし、見づらい
そういうこと
flexboxはこのように指定するだけで並びを変えたりするのが簡単になり柔軟なレイアウトができるようになるんだ
では基本からまずいってみよう
1.flexboxの基本
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>このようにdivやpタグなどのブロック要素は作られると縦に積まれます。
一個一個display: inline-block;を指定してもできますが、flexboxを使う事で簡単にできます。
やり方は親要素で囲み、その親要素の方にdisplayプロパティ、値を”flex”に設定します。
<div class="container"> <!--"containerクラスで囲む"-->
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</div>.container{
display: flex; /*横並びにする*/
}簡単に横並びになった！
ちなみにclass名はなんでも良いのですが親要素を”flex-container”、子要素を”flex-item”と呼ぶので”container”にする事が多いです。
同様に縦に並んでいるリストもdisplay: flex; を親要素の方に使う事で横並びにする事ができます。
- リスト１
- リスト２
- リスト３
- リスト４
<ul class="flex-list">
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
</ul>.flex-list{
display: flex;
list-style: none; /*リストの点を消す*/
}- リスト１
- リスト２
- リスト３
- リスト４
こちらも横並びになりました
こっちは囲わなくても良いの？
li要素は初めから親要素であるul要素で囲まれているためわざわざ作って囲む必要はないよ
でも複数リストがある場合だとこんがらがるからクラス名は付けた方がいいかな
2.子要素の並び”flex-directionプロパティ”
flex-directionプロパティは値を指定することで”flex item(子要素)”がどちらの方向(主軸の向き)に並ぶかを指定する事ができます。
セレクター{
display: flex;
flex-direction: 値;
}2-1.row
初期値は”row”で主軸が横並びになります。
セレクター{
display: flex;
flex-direction: row; /*display: flex;を指定した時点で値は"row"なので、あえて指定しなくても良い*/
}<div class="container">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</div>.container{
display: flex;
flex-direction: row;
}初期値なので目に見えた変化はありません。
2-2.row-reverse
主軸が横になり、かつ反転します(右から左へ並ぶ)。
.container{
display: flex;
flex-direction: row-reverse;
}2-3.column
“column”は主軸が縦になります。
.container{
display: flex;
flex-direction: column;
}2-4.column-reverse
主軸が縦になり、かつ反転します(下から上へ並ぶ)。
.container{
display: flex;
flex-direction: column-reverse;
}順番が反対になってますね。
まとめるとこんな感じです。
ちなみに主軸と交わる軸を交差軸といいます。
どちらが主軸で交差軸かという考え方は常に意識しましょう
次回以降この考えが大事になってきます
はーい
3.まとめ
親要素で囲み、display: flex;を使えば横並びにできる。
<div class="container">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</div>セレクター{
display: flex;
}flex-directionプロパティは子要素の並び(主軸の向き)を指定する事ができる。
セレクター{
display: flex;
flex-direction: 値;
}クリックで値が変わります
・reverseは軸が反転すると考える
次回はこの主軸と交差軸についてのプロパティについて学習します
コメント