2021/9/3 Webナイト宮崎 Vol.14 での発表資料です。 サンプルコードはこちら https://github.com/tomoeine/flexbox-examples

1. Flexbox
しか勝たん
澤井 友恵
@tomoeine

2. 自己紹介
フリーランスWebエンジニア
澤井友恵 @tomoeine
● 宮崎の山の中でリモートワーク
● 東京生まれ・宮崎移住
● SIer → Web系に転身した人
● 2018年6月〜 フルリモートでフリーランス
● Laravel, Vue.js, Ruby on Rails, AWS 等
● 開発するサービスのマークアップまで
やることが多い

3. ● 普段雰囲気でマークアップしているWebエンジニアが、
我流の方法を紹介する発表です！
お許しください！
● もっといいやり方があるよ〜などご意見は
LeacTion! まで！
おねがい

4. Flexbox とは

5. Flexbox とは
通常フレックスボックスと呼ばれている Flexible Box Module は一次元のレイアウトモデル
として、またインターフェイス中のアイテム間でスペースの分配をする機能と強力な位置合
わせをする機能を提供するものとして設計されました。
MDN「フレックスボックスの基本概念」より
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
いい感じのレイアウトを簡単なコードでできるやつ
・・・ぐらいの理解で私は使っていますｗ

6. ブラウザの対応状況
一般的なほとんどのブラウザでOK
IEでは微妙にバグがあるらしい
Can I useよりhttps://caniuse.com/flexbox

7. Flexbox の代替手段
テーブルレイアウト
● 昔多かった
● SEO的によくない＆レスポンシブ対応が難しいので消えていった？
Float
● 回り込みのプロパティだが、ブロック要素を横並びにしたり右寄せにするのにも使える
● 回り込みの解除が必要で、思い通りにレイアウトするには技術が必要だった
グリッドレイアウト
● display: grid; で指定
● 格子状のレイアウトは Flexbox よりもこちらの方が書きやすいらしい
position: absolute;
Flexboxに勝つかもしれないやつ来た・・・

8. Flexbox実例集

9. 横一列に並べたい！
.header__menu {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
}
会社概要 製品 お問合せ

10. ページのレイアウトを組みたい！
.container {
display: flex;
max-width: 800px;
height: 100%;
margin: 60px auto;
}
.side-menu {
width: 200px;
height: 100%;
}
.contents {
display: flex;
flex-direction: column;
width: 600px;
}
.container
.side-menu .content1
.content2
.contents

11. 親要素の幅が変わっても子要素の幅の比率を一定にしたい！
.container {
display: flex;
max-width: 800px;
height: 100%;
margin: 60px auto;
}
.side-menu {
flex: 1;
height: 100%;
}
.contents {
flex: 3;
display: flex;
flex-direction: column;
}
1 3
1 3

12. サムネイルを等間隔に折り返しつきで並べたい！
.parent {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 800px;
margin: 60px auto;
}
.thumbnail {
width: 250px;
height: 250px;
background-color: #ccc;
margin-bottom: 20px;
}
.parent
.child

13. PCでは左右の端に寄せて、スマホでは中央に寄せたい！
.parent {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 800px;
margin: 60px auto;
}
@media screen and (max-width: 768px) {
.container {
justify-content: space-around;
}
}
.thumbnail {
width: 250px;
height: 250px;
background-color: #ccc;
margin-bottom: 20px;
}
.parent
.child
何もしないとこうなるのを・・・
こうしたい！！

14. インライン要素もブロック要素もとにかく中央に寄せたい！
.parent {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 800px;
margin: 60px auto;
}
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた
事だけは記憶している。
吾輩はここで始めて人間というものを見た。
※`text-align:center;` と `margin: 0 auto;` を組み合わせてもいいけどそれよりも楽では

15. 最新のチャットメッセージを一番下に追加していきたい！
.messages {
display: flex;
flex-direction: column-reverse;
overflow: scroll;
width: 100%;
height: 400px;
}
.message-item {
min-height: 60px;
}
※html側では新しい順に並べる
※動的に最新メッセージを追加するときにオートスクロールの機能を入れなくてすむ
メッセージを入力 送信

16. ● Flexbox を使えば基本的なレイアウトはだいたいいける
● ちょっと応用的なレイアウトも工夫すればいける
● Flexbox を使えばがんばりすぎなくてもレスポンシブ対応できる
まとめ
Flexbox以外が勝つ場合もありそうだけど
やっぱりFlexbox が好き！！

17. Flexbox
しか勝たん
澤井 友恵
@tomoeine
ご清聴ありがとうございました
サンプルコードはこちら
https://github.com/tomoeine/flexbox-examples