どうも。
今日から駆け出しWebエンジニアのため、そして己の備忘録としてブログを更新します。
主に関してはのことは追々と。。
さっそく本題に入りますが、記念すべき初投稿のテーマはコレにしようと前々から思っていました。
実際によく使うし、なんか理にかなってる？というか、こんな感じに制御できたらいいなーってのを叶えてくれている気がして好きなのが、フレックスボックス。
フレックスボックス（display: flex; ）の使い方とその特徴
CSSのdisply: flex;は、親要素にかけて、子要素を横並びに配置するレイアウト方法です。
横並びにする方法は、他にもfloatやinline-blockを利用する方法がありますが、disply: flex;はより柔軟にレイアウトを組むことができます。
フレックスボックス（display: flex; ）の基本的な使い方
フレックスボックスの基本的な使い方はコレだけ。
- 親要素にdisply: flex;を指定する。
- 子要素の幅や間隔を調整する。
サンプルコードはこちら。
<div class="container">
<div class="item_01"></div>
<div class="item_02"></div>
<div class="item_03"></div>
</div>.container {
display: flex;
}これがフレックスボックスの基本形です。
並べたい要素を箱の中に入れて、その箱（親要素）に display: flex; をかけます。
上記では、要素はヨコ一列に並んだ状態になります。
ここから、justify-content、align-itemsなどのプロパティを使用して、箱の中の要素（子要素）の並べ方や間隔を指定します。
それでは、調整するためのプロパティを見ていきましょう。
フレックスボックスのレイアウトを調整するcssプロパティ
フレックスボックスのレイアウトを調整するためのプロパティはたくさんありますが、このページで紹介するのはこちら。実際に僕が現場でよく使うものを紹介します。（追々すべて紹介できたらいいな、、）
- justify-content
- align-items
- flex-direction
- flex-wrap
- gap
簡単なレイアウトはこれだけ使えれば大抵いける気がする(笑)
それではそれぞれの特徴と値、使いどころなんかも紹介します。
justify-content プロパティの使い方と応用例
- flex-start：子要素を左端に揃える
- flex-end：子要素を右端に揃える
- center：子要素を中央に揃える
- space-between：子要素の間のスペースを均等に分配する
- space-around：子要素の周囲のスペースを均等に分配する
- stretch：子要素を親要素の幅いっぱいに伸ばす
個人的によく使う値はcenterとspace-between。
See the Pen Untitled by wemoir (@wemoir) on CodePen.
子要素には基本的にwidthを指定することが多いので、centerで指定する時は親要素にwidthとmargin: 0 auto;を指定しなくても良いですね。
逆にspace-betweenやspace-aroundで指定する時は親要素にもwidthを指定してあげる方が使いやすいです。
align-items プロパティの使い方と応用例
- flex-start：子要素を上端に揃える
- flex-end：子要素を下端に揃える
- center：子要素を中央に揃える
- stretch：子要素を親要素の高さいっぱいに伸ばす
- baseline：子要素のベースラインを揃える
個人的によく使う値はflex-startとcenter。
See the Pen Untitled by wemoir (@wemoir) on CodePen.
justify-contentのサンプルと比べて左に寄っているのは水平方向に何も指定していないからです。
flex-start はありとなしを用意しました。flexは横並びした要素の高さをオートで合わせるという機能があります。作りたいデザインによってはこの機能を切りたいことがあるので、flex-startで元の高さでレイアウトできるというのを覚えておくと、出番があるかもです。
flex-direction プロパティの使い方と応用例
- row：子要素を横並びに配置する
- column：子要素を縦並びに配置する
- row-reverse：子要素を横並びに配置するが、反対側から配置する
- column-reverse：子要素を縦並びに配置するが、反対側から配置する
flex-direction に関しては、justify-contentとalign-itemsに比べると使用頻度は正直少ないです。
ですが、flex-direction: row-reverse; は覚えておくと便利なシーンがあります。
レスポンシブザインの際、PCでは2カラムをスマホにした時は1カラムで並べることが多いです。
スマホのデザインでは画像→テキスト→画像→テキスト…となるが、PCでは画像とテキストが2カラムでテレコに並ぶ場合、row-reverse が有効になってきます。
ちなみに初期値がrow になっているので flex-direction: row;をあえて指定するシーンはないですね。
See the Pen Untitled by wemoir (@wemoir) on CodePen.
flex-wrap プロパティの使い方と応用例
- nowrap：子要素を折り返さない
- wrap：子要素を折り返す
flex-wrap は折り返したいかどうかだけ考えたら良いので、カンタンです。
gap プロパティの使い方と応用例
子要素間の間隔を指定するためのプロパティです。
コレはほんとナイスなプロパティ！ぜひ覚えて！ぜひ使って！
古いブラウザでは反映されなかったものの、IEのサービス終了に伴い、使って良い感じ出ました。(笑)
使い方としては以下の感じです。
.container {
display: flex;
gap: 3vw/* タテ */ 2vw/* ヨコ */;
}ポイントはdisplay: flex;と同じ親要素にあてるところですね。
padding,marginみたく、gap: 3vw;と指定すると、縦横（垂直方向・水平方向）両方に3vwの余白を取ることができます。
See the Pen Untitled by wemoir (@wemoir) on CodePen.
親要素と子要素の幅さえ決めれば、justify-content: space-between; で良い感じにレイアウトできるシーンもありますが、動的ページでは上記サンプルのように不自然なレイアウトになってしまいます。
3カラム、4カラムまでなら回避する方法もありますが（いつかは紹介したいな…）、それよりもgapを使って調整する方が簡単です。しかもタテ（水平方向）にも余白を開けることも一緒にできてラクですよね。
おわりに
いかがでしたでしょうか。
よく使うかなー、これは実践的なんじゃないかなーというところを重点的に紹介してきました。
ほんとはorderとか、もっと深掘りしたフレックスボックスの部分とかも紹介できると良いのかもしれませんが、使わないことをいろいろ言ってもややこしくなりますし、初回の投稿ですしこのくらいで。(笑)
