Flexbox Layout徹底解説 TECH
Flexbox(display: flex)の使い方が分からない、忘れてしまった、もっと学びたい。
そういったお悩みをお持ちの方に向けて、この記事では徹底的に解説していきます。
Flexbox Layoutとは
display: flexを使うレイアウトの事を、Flexbox Layoutと一般的に呼んでいます。読み方は、フレックスボックスレイアウトです。
この呼び方は略された呼び方で、正式にはFlexible Box Layout Moduleと言います。
フレキシブルという名の通り、柔軟にレイアウトを組む事ができるのです。
Flexboxを使う場面
より実際に使う所で言うと、下記のような使ったりします。
その他、工夫次第でどんなレイアウトでも大抵のものは組む事が出来ます。
Flexboxの基本的な書き方
Flexboxは、Flexコンテナと言う親要素の中に、Flexアイテムと言う子要素を入れるようにして書きます。
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container{
display: flex;
}
もし実際に試しながらやる場合は、containerやitemに色や高さをつけると分かりやすいので、そうする事をオススメします。
親要素で使えるプロパティ
親要素とは、基本的な書き方で示したクラス名がcontainerの要素の事です。
この親要素の事を、「Flexコンテナ」と言います。
flex-direction
Flexアイテムをどの方向に配置していくかを指定するプロパティ。
.container{
flex-direction: row; /* 右から左に配置 */
flex-direction: row-reverse; /* 左から右に配置 */
flex-direction: column; /* 上から下に配置 */
flex-direction: column-reverse; /* 下から上に配置 */
}
初期値はrowで、このプロパティを使う頻度は少なめです。
flex-wrap【よく使う】
FlexアイテムがFlexコンテナの幅以上時に折り返すかどうかとその方向を指定するプロパティ。
.container{
flex-wrap: nowrap; /* 折り返さない */
flex-wrap: wrap; /* 折り返す */
flex-wrap: wrap-reverse; /* 折り返す(折り返し方向は上) */
}
初期値はnowrapで、折り返して欲しい場面が多いので、wrapに変える事が多めです。
flex-flow
flex-directionとflex-wrapをまとめて指定できるショートハンドプロパティ。
.container{
flex-flow: row nowrap;
}
初期値はrow nowrapで、このプロパティを使う頻度は少なめです。
justify-content【よく使う】
Flexアイテムを水平方向(横方向)のどの位置に配置するかを指定するプロパティ。
.container{
justify-content: flex-start; /* 左揃え */
justify-content: flex-end; /* 右揃え */
justify-content: center; /* 中央揃え */
justify-content: space-between; /* 等間隔に揃え(最初と最後は両端) */
justify-content: space-around; /* 等間隔に揃え */
}
初期値はflex-startで、どの値もよく使います。
使い分けができるとコーディングの幅が広がります。
align-items
Flexアイテムを垂直方向(縦方向)のどの位置に配置するかを指定するプロパティ。
.container{
align-items: stretch; /* Flexコンテナの高さで揃える */
align-items: flex-start; /* 上揃え */
align-items: flex-end; /* 下揃え */
align-items: center; /* 中央揃え */
align-items: baseline; /* ベースラインで揃える */
}
初期値はstretchで、flex-startに変えるかそのままかが多いです。
align-content
Flexアイテムが複数の時に、2次元方向(縦横方向)のどの位置に配置するかを指定するプロパティ。
.container{
align-content: stretch; /* Flexコンテナの高さで揃える */
align-content: flex-start; /* 上揃え */
align-content: flex-end; /* 下揃え */
align-content: center; /* 中央揃え */
align-content: space-between; /* 等間隔に揃え(最初の行と最後の行は端) */
align-content: space-around; /* 等間隔に揃え */
}
初期値はstretchで、このプロパティを使う頻度は少なめです。
flex-wrap: nowrap;の場合、Flexアイテムが１行なので、このプロパティalign-contentを指定しても意味がないです。
子要素で使えるプロパティ
子要素とは、基本的な書き方で示したクラス名がitemの要素の事です。
この子要素の事を、「Flexアイテム」と言います。
order【よく使う】
Flexアイテムの順序を指定するプロパティ。
.item:nth-of-type(2){
order: -1;
}
初期値は0で、レスポンシブ対応で要素の順番を変えたい時に使用する事が多いです。
2カラムレイアウトで左サイドバーの時に、メインカラムを上で下にサイドバーカラムにしたい時なんかに便利です。
より小さい値から順に先頭に並びます。
flex-grow
Flexコンテナに余白がある時に、指定のある子要素が他の子要素に対してどれくらい伸びるかを指定するプロパティ。
.item:nth-of-type(2){
flex-grow: 1;
}
初期値は0で、全体のバランスを崩さずに特定のFlexアイテムを大きくしたい時に便利です。
なお、マイナスの値は無効となります。
flex-shrink
Flexコンテナに余白がない時に、指定のある子要素が他の子要素に対してどれくらい縮むかを指定するプロパティ。
.item:nth-of-type(2){
flex-shrink: 2;
}
初期値は1です。マイナスの値は無効となります。
Flexコンテナに余白がない時という状況では、Flexアイテムを折り返すか、カルーセルという横スクロールにするかの2択になる事が多いので、こちらのプロパティは使用頻度は低いです。
flex-basis
Flexアイテムの基準となる幅を指定するプロパティ。(widthとほぼ同じ)
.item:nth-of-type(2){
flex-basis: 100px;
}
初期値はautoで、%やpxなどで値の指定が出来ます。
widthと変わらないので、どちらを使っても大丈夫です。
%で、Flexアイテムを均等に表示させるような使い方をする事が多いです。
flex
flex-growとflex-wrapとflex-basisをまとめて指定できるショートハンドプロパティ。
.item:nth-of-type(2){
flex: 1 1 auto;
}
初期値は0 1 autoで、順番はflex-grow``flex-wrap``flex-basisとなりますので、ご注意。
align-self
Flexアイテムの垂直方向の位置を指定するプロパティ。
align-itemsの子要素で個別に配置を変えたい時に使えるバージョン。
.item:nth-of-type(2){
align-self: auto; /* align-itemsの値を継承 */
align-self: stretch; /* Flexコンテナの高さに配置 */
align-self: flex-start; /* Flexコンテナの上に配置 */
align-self: flex-end; /* Flexコンテナの下に配置 */
align-self: center; /* Flexコンテナの中央に配置 */
align-self: baseline; /* Flexコンテナのベースラインに配置 */
}
初期値はautoで、align-itemsよりも優先されるので、個別に配置を変えたい時に便利。
こんなレイアウトを組める
記事一覧及び2カラムレイアウト
画像とテキストの横並び
ロゴとナビゲーションの端寄せ
まとめ
今回は、Flexbox Layoutについて詳しく解説してみました。
これを使えるかどうかで、コーディングの幅がだいぶ変わると思いますので、是非使えるようにしてみてください。
特にflex-wrap、justify-content、orderとかはよく使うと思いますので、完璧に抑えておきましょう。
以上、横並びなど画面レイアウトに使えるFlexboxの解説でした。