見出し画像

【完全攻略】超便利なFlexboxを使いこなそう

はむちゃん🐹

Flexboxってこんなに使えるの？！と思ったのでまとめ☺️できることがめちゃめちゃ多いので難しそう、、、と手を出せずにいたのですが、基本だけ覚えてもめちゃくちゃ使える優れものです。

1.Flexboxとは？

Flexboxとは、CSSで行う要素の「配置」を短いコードで柔軟に行えるレイアウトモードです。今まで使っていた「float」「display」「margin」などもレイアウトを変えられて便利なのですが、それぞれの癖を理解して利用しないとレイアウトが崩れたり、『何ガ起コッテイルノ。。。』ってなりがちだったのですが、Flexboxを使えば、このような『なんで？』から解放されちゃいます✨

また、現時点では、ほとんどの主要なブラウザに対応していますので、このあたりの心配もいりません。

2.実践！実際にFlexboxを使ってみる

親要素にdisplay:flex;を入れればいろいろな指示ができるようになります！

画像1

▼body内

<body>

<!--f-containerが親要素-->
<div class="f-container">
	
	<!--f-itemが子要素-->
	<div class="f-item1">1</div>
	<div class="f-item2">2</div>
	<div class="f-item3">3</div>
</div>

</body>

▼style内

<style>
.f-container{
	text-align: center;
}
.f-item1{
	width: 100%;
	background-color: #FFA3A3;
	}
	
.f-item2{
	width: 100%;
	background-color: #FFF59F;
	}
	
.f-item3{
	width: 100%;
	background-color: #A8CFF3;
	}

</style>

これがデフォルトです！親要素はテキストが中央揃えになる指示、子要素には幅100%とそれぞれ背景カラーをつけています。

▼今の段階ではこんな感じ

画像2

これを今からFlexboxを使っていろいろ変更させてみます！

3.flex-direction(要素の方向を決める)

いろんな指示ができるのですが、一番使えそうなflex-directionから紹介していきます🎉

①row（横並びレイアウト）

▼style内にdisplay:flex;＆指示を1行を足すだけ！ ​

.f-container{
	text-align: center;
	display: flex;
	flex-direction: row;
}

これで横並びに配置してくれます！！めっちゃ簡単🥲

画像3

②row-reverse（逆から横並びレイアウト）

▼一番下の指示にリバースを足すだけ

.f-container{
	text-align: center;
	display: flex;
	flex-direction: row-reverse;
}

これだけで逆からの横並びが、、、！どういう場面で使うんだろう🤔？（コーディング初心者）

画像5

③column-reverse（逆から縦並びレイアウト）

▼一番下の支持をリバースを追加して縦並びに

.f-container{
	text-align: center;
	display: flex;
	flex-direction: column-reverse;
}

これだけ～！普通のcolumnはデフォルトとおんなじなので、リバースバージョンをご紹介✨

画像4

4.flex-wrap(要素の折り返し)

▼body内ちょっと子要素ふやします（子要素すべてにf-itemを追加します）

<body>

<!--f-containerが親要素-->
<div class="f-container">
	
	<!--f-itemが子要素-->
	<div class="f-item f-item1">1</div>
	<div class="f-item f-item2">2</div>
	<div class="f-item f-item3">3</div>
	<div class="f-item f-item4">4</div>
	<div class="f-item f-item5">5</div>
	<div class="f-item f-item6">6</div>
</div>

</body>

▼syle内

<style>
.f-container{
 display: flex;
}
.f-item{
 width: 30%;
 text-align: center;
}
.f-item1{
	background-color: #FFA3A3;
	}
	
.f-item2{
	background-color: #FFF59F;
	}
	
.f-item3{
	background-color: #A8CFF3;
	}
.f-item4{
	background-color: #FFB07B;
	}
	
.f-item5{
	background-color: #82D5E3;
	}
	
.f-item6{;
	background-color: #B096E7;
	}

</style>

デフォルトでは下記表示になります！

画像6

①nowrap（初期値）

.f-container{
	display: flex;
	flex-wrap: nowrap;
}

画面の幅がどれだけ変わっても一列にならんだまま！何も指定しないときと同じです！

画像6

②wrap(オーバーする子要素を繰り返す)

.f-container{
	display: flex;
	flex-wrap: wrap;
}

子要素それぞれに指定したwidth:30%を守って、オーバーするものは下に並んでくれます。かしこい、、、✨

画像8

③wrap-reverse(折り返し＆下から上へ)

.f-container{
	display: flex;
	flex-wrap: wrap-reverse;
}

ちょっと複雑だけど大丈夫です！『何？！』って私もはじめ理解が追いつかず戸惑いました。。。折り返しだけ指示してるからこうなってるんです！

画像9

▼要素の方向も完全に逆バージョンにしたい方は先ほどやったflex-directionを追加してみましょう！

.f-container{
	display: flex;
	flex-wrap: wrap-reverse;
	flex-direction: row-reverse;
}

画像10

5.flex-flow(「flex-direction」と「flex-wrap」を一度に指示)

完全逆バージョンを先ほど紹介しまいしたが、どちらも支持するときに1行で済ませられるのでおすすめです！

.f-container{
	display: flex;
	flex-wrap: wrap-reverse;
	flex-flow: row-reverse wrap-reverse;
}

▼先ほどと同じ結果になります！css内はできるだけシンプルにしたいので、覚えておくといいかもしれないです。

画像11

6.justify-content(水平方向の配置)

水平方向の配置を変えられます！このあたりまで使えるとぐっとデザインの幅が広がりそうなので見逃せないです✨

①flex-start（初期値）

.f-container{
	display: flex;
	justify-content: flex-start;
}
.f-item{
	width:10%;
	text-align: center;
}

▼それぞれの子要素のwidthを10%に変更してます！右側に余白がありますね！これがデフォルトの左詰めです。

画像12

②flex-end（右から左へ要素を配置）

.f-container{
	display: flex;
	justify-content: flex-end;
}

▼先ほどとは逆で右詰になります！最近ロゴを左上、メニューを右下に配置するLPとかもよく見かける(スマホ用かも)ので使い方無限大な気がします！

画像13

③center(親要素内で中央揃え)

.f-container{
	display: flex;
	justify-content: center;
}

▼コンテナ(親要素)内で真ん中にぎゅっと寄ってます！左右に余白ができてます。

画像14

④space-between(要素を均等に配置)

.f-container{
	display: flex;
	justify-content: space-between;
}

▼アイテム(子要素)の感覚が均等になります。ただ両端（1と6）はコンテナの一番端と余白をとらずにくっついてしまいます。

画像15

⑤space-around(それぞれのアイテム(子要素)に余白をもって配置)

.f-container{
	display: flex;
	justify-content: space-around;
}

▼先ほどのbetweenとは違い、両端にも余白が生まれています。

画像16

7.align-items(垂直方向の配置)

先ほどはアイテム(子要素)内を数字だけにしてましたが今回は★に変えています。​

▼styleタグのアイテム(子要素)の文字の大きさを変えてます。

 .f-item1{
	background-color: #FFA3A3;
	font-size: 50px;
	}
	
.f-item2{
	background-color: #FFF59F;
	font-size: 20px;
	line-height:normal;
	}
	
.f-item3{
	background-color: #A8CFF3;
	font-size: 80px;
	}

.f-item4{
	background-color: #FFB07B;
	font-size: 30px;
	}
	
.f-item5{
	background-color: #82D5E3;
	font-size: 100px;
	}
	
.f-item6{
	background-color: #B096E7;
	font-size: 40px;
	}

①stretch(初期値)

.f-container{
	display: flex;
	align-items: stretch;
}

▼文字の高さはバラバラですが、上下の背景の高さは揃っています。

画像17

②flex-start(アイテムを上揃えで配置)

.f-container{
	display: flex;
	align-items: flex-start;
}

▼上揃えで高さはそれぞれの文字の大きさに応じて変わっています！！

画像18

③flex-end(アイテムを下揃えで配置)

.f-container{
	display: flex;
	align-items: flex-end;
}

▼今度は先ほどとは反対で下揃えです！

画像19

④center(上下中央揃えで配置)

.f-container{
	display: flex;
	align-items: center;
}

▼綺麗に中央揃えになってます！！

画像20

⑤baseline(アイテム内のベースラインでそろえて配置)

.f-container{
	display: flex;
	align-items: baseline;
}

▼先ほどのcenterとは違い、アイテム内のテキストのベースラインで揃っています！！すごすぎる、、、

画像21

8.align-content(複数行の時の垂直方向の位置を指定する)

①stretch(初期値)

▼わかりやすいようにコンテナ(親要素)にうすい黄色、アイテム(子要素)をwidth:25%に変更してます。

.f-container{
	background-color: #F9F1CC;
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
	height: 100px;
}
.f-item{
	display: block;
	text-align: center;
	width: 25%;
}

▼コンテナ(親要素)の高さ(height:100%)に合うように自動でアイテム(子要素)の高さを設定してくれてます！

画像22

②flex-start(上位置に要素をあわせ、下方向へ要素を並べる)

.f-container{
	background-color: #F9F1CC;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	height: 100px;
}

▼親要素の高さに関係なく、アイテムを左上から順に並べていきます。

画像23

③flex-end(親要素の下から要素を配置)

.f-container{
	background-color: #F9F1CC;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
	height: 100px;
}

▼親要素の下から上に並んでます！

画像24

④center(アイテムを親要素の中央で揃える)

.f-container{
	background-color: #F9F1CC;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	height: 100px;
}

▼親要素で指定した高さのちょうど中央に子要素が配置されるようになっています。

画像25

⑤space-between(縦方向でアイテムを均等に配置)

.f-container{
	background-color: #F9F1CC;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	height: 100px;
}

画像26

※アイテム(子要素)width:50%に変えてます～！

⑥space-around(縦方向で子要素に余白をもって配置)

.f-container{
	background-color: #F9F1CC;
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	height: 100px;
}

▼space-betweenとは違って上下にも余白がうまれています！

画像27

9.まとめ

全部覚える必要は全くないと思うのですが、何ができる？どうやって応用できそう？を考えるためには動きを知っておくのは大事かなーと思います！まだまだ出来ることがあるので、また使うときがあれば続きまとめる～～！

この記事が気に入ったらサポートをしてみませんか？