2022.07.20
【簡単】プロのようなデザインが作れるツールCanva（キャンバ）のおす...
デザイン
2021.07.06
CSSでレイアウトを作成する時、よく名前が上げられるFlexbox。
プロパティの数も多く、慣れるまでは難しく感じるかもしれませんが、細かい部分をきちんと合わせてくれたり、後々レイアウトを調整したくなった時に調整がしやすいとても便利なプロパティです！
今回はそんなFlexboxの基本的な使い方とプロパティについてご紹介します！
目次
そもそもFlexboxとは何か？というと、正式名称は「Flexible Box Layout Module」と言う、CSS3から導入されたfloatの代わりに使えるようなレイアウト手法のことです。floatのように横並びに配置するレイアウトを組む時に主に利用されています。
以前まではサポートされていないブラウザも多く、ベンダープレフィックスを付ける必要がありましたが、現在はIE11に対応する場合以外はそのまま書いても問題なくなりました。
Flexboxは親要素（コンテナ）と子要素（アイテム）の2つの要素によって構成されています。
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container{
display:flex;
}
横並びにしたい子要素を囲む親要素にdisplay:flexをかけることで横並びのレイアウトにすることができます。
横並びにするだけならこれで完了ですが、親要素、子要素にそれぞれプロパティを書いていくことでより細かい調整を行うことができます。
親要素に指定できるプロパティには並び方を指定できるものとアイテムの位置を指定できるものがあります。
それぞれの使い方をご紹介していきたいと思います！
See the Pen by spiqa design (@spiqa_design) on CodePen.
まず紹介するのは子要素の並び順を指定するflex-directionです。
flex-directionを応用することで、HTMLを入れ替えることなく左右のコンテンツを入れ替えることができるため、レスポンシブでレイアウトを変えたい場合などにとても便利です。
See the Pen flex-row応用 by spiqa design (@spiqa_design) on CodePen.
Flexboxは何も指定をしないと折り返さない横並びの表示となります。
そのため、子要素を折り返しさせたい場合はflex-wrapを指定します。
See the Pen flex-wrap by spiqa design (@spiqa_design) on CodePen.
flex-flowはflex-directionとflex-wrapを一括で指定することができるプロパティです。flex-direction→（間に半角スペース）→flex-wrapの順番で指定します。
Flexboxは見た目を整えるためにプロパティを多く指定することがあるため、ショートハンドを使うことですっきりとしたCSSを書くことができます！
.container {
flex-flow: row wrap;
}
justify-contentを指定することで、子要素の水平方向の位置を指定することができます。
初期値では左揃えになっていますが、中央揃え、均等配置など様々な指定をすることができます。
See the Pen by spiqa design (@spiqa_design) on CodePen.
align-itemsを指定することで、子要素の垂直方向の位置を指定することができます。justify-contentと組み合わせることで上下左右中央揃えにすることもできます。
See the Pen by spiqa design (@spiqa_design) on CodePen.
align-contentを指定することで、子要素が複数行ある場合の垂直方向の位置を指定することができます。
使用するには親要素の高さを決め、flex-wrapで折り返しを指定しておく必要があります。
See the Pen by spiqa design (@spiqa_design) on CodePen.
ここまでにご紹介した親要素以外にFlexboxを使用する子要素に対しても個別の設定をすることができます。
一つ一つに指定を書くことによってHTMLの記述した順番に関わらず、要素の並び順を指定することができます。
See the Pen order by spiqa design (@spiqa_design) on CodePen.
flex-growを指定することで、それぞれに伸び率を指定することができます。
初期値は0になっており、マイナス値の指定はできません。
See the Pen flex-grow by spiqa design (@spiqa_design) on CodePen.
先ほどご紹介したflex-growとは逆に縮み率を指定することができます。
こちらも先ほど同様に初期値は0です。
See the Pen flex-shrink by spiqa design (@spiqa_design) on CodePen.
flex-basisを指定することで、子要素それぞれの基本幅を指定することができます。
初期値はautoになっており、%で指定をします。
See the Pen by spiqa design (@spiqa_design) on CodePen.
flexは親要素のflex-flowのようにflex-grow、flex-shrink、flex-basisを一括で指定することができます。flex-grow→（間に半角スペース）→flex-shrink→（間に半角スペース）→flex-basisの順番で指定します。
.item01 {
flex: 1 1 10%;
}
.item02 {
flex: 0 0 30%;
}
align-selfはコンテナに余白がある時に子要素の中身の垂直方向の位置を指定することができます。
Flexboxではvertical-alignが使えないため、align-selfで指定をします。
親要素のalign-itemsでも垂直方向の指定はできますが、両方書いた場合はalign-selfが優先されます。
See the Pen by spiqa design (@spiqa_design) on CodePen.
ほとんどのブラウザに対応はしていますが、IE11ではベンダープレフィックスが必要だったり、バグが起こってしまうこともあります。
バグの対処法は他の記事で詳しくご紹介いたします！
最初に覚えることがたくさんあるため、一見ハードルが高く感じるかもしれませんが、レイアウトを作成する上でとても便利なプロパティです！
一気に全てを覚えるのではなく、折り返しや位置の指定などすぐに使うプロパティから覚えていくと、どんどん使えるようになっていくと思います！
また、ゲーム感覚でFlexboxの練習ができるサイトもあるため、ぜひ遊びながら気軽にFlexboxに触れてみてください！
FLEXBOX FROGGY
関連記事はこちら
この記事をシェアする
株式会社スピカデザイン
https://spiqa.design/
spiqa_design