flexboxの使い方とよく使うパターンまとめ

今回はCSSのflexboxの使い方とよく使うと思われるパターンをまとめました。

flexboxは若干難しいですが、使っているうちに慣れると思って積極的に使っていきましょう。

実際に慣れるとかなり使いやすいというか応用が利きやすいです。

 

flexboxとは?

その名の通りボックス内の子要素を柔軟に配置できるプロパティです。

親要素の横幅を等分したり、文字を中央揃えにしたり、要素を手軽に中央に配置できる優れものです。

ほとんどのブラウザに対応している(一部ベンダーインプレックスが必要)ので幅広く使えるものいい点ですね。

 

flexboxの使い方

親要素にdisplay: flexをつけるだけでそのボックスはフレックスボックスになります。

この中でflex関連のプロパティを適用しまくることで子要素を柔軟に配置できるようになるわけです。

HTML

<div class="flex-container">
  <div>
    子要素1
  </div>
    <div>
    子要素2
  </div>
  <div>
    子要素3
  </div>
</div>

 

CSS

/* flexbox設定 */
.flex-container {
  display: flex;
}

 

flexboxの初期値

覚える必要は全くないですが、一応flexboxの初期値を確認しておきます。意味を知らなくても大丈夫です。

flexboxには親要素(flex-container)と、子要素(flex-item)があるものとします。

flexboxを指定した時のそれぞれの初期値は以下の通りです。

.flex-container {
    display: flex;
    flex-direction: row;
    align-items: stretch; 
    justify-content: flex-start; 
    flex-wrap: nowrap; 
    align-content: stretch;
}
.flex-item {
    flex-grow: 0; 
    flex-shrink: 1;
    flex-basis: auto; 
}

よく使うflexboxの値

左揃えで横に並べる

文字などをフレックスボックスを使って左揃えで横に並べたいときはdisplay: flexを指定するだけです。

というか左揃えで横に並べるだけならわざわざフレックスボックスを使う必要はないです。

.flex-container {
  display: flex;
}

 

右揃えで横に並べる

文字などを右揃えで横に並べたい場合はjustify-content: flex-end;を指定します。

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

 

中央揃えで横に並べる

中央揃えで横に並べたい場合はjustify-content: center;を指定します。

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

 

両端揃えで横に並べる

複数の要素の最初と最後の要素は両端に配置して、他は等間隔で配置したい場合はjustify-content: space-between;を指定します。

要素を等間隔に指定するときは特にフレックスボックスが活躍しますね。

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

 

最初の要素だけ左に配置、他は全て右に配置

やや特殊ですが、最初の要素だけ左に配置し、他の全ての要素を右に配置したい場合はjustify-content: flex-end;を指定します。

最初の要素にはmargin-right: autoを指定しておきましょう。

.flex-container {
  display: flex;
  justify-content: flex-end;
}
.flex-conteiner >:first-child {
  margin-right: auto;
}

 

最初の要素だけ右に配置、他は全て左に配置

最初の要素だけ右に配置し、他の全ての要素を左に配置したい場合はjustify-content: flex-end;を指定します。

最後の要素にmargin-left: autoを指定しておきます。

.flex-container {
  display: flex;
  justify-content: flex-end;
}
.flex-container >:last-child {
  margin-left: auto;
}

 

flexboxで垂直方向を揃える

垂直方向を揃えるのはvertical-align: middleが定番ですが、正直これは使いづらいです。

ちゃんと効いてくれる条件がやや厳しいので、手軽に便利に使えるわけではないのが残念ですね。

ただ、flexboxを使うと垂直方向に揃えるときに特に活躍します。

個人的には垂直方向に揃えるならflexboxが一番使いやすいです。

 

子要素を上で揃える

子要素を上で揃えるにはalign-items: flex-start;を指定します。

複数ある高さの違う子要素で、一番高さのある要素の上に揃うようになります。

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

 

子要素を下で揃える

子要素を下で揃えるにはalign-items: flex-end;を指定します。

複数ある高さの違う子要素で、一番高さのある要素の下に揃うようになります。

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

 

垂直方向に中央揃えにする

おそらくflexboxで一番使う機会が多く、一番便利で使いやすい指定です。

vertical-align: middleが使えない場合でもこれなら使えるので、中央揃えならかなり便利ですね。

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

 

垂直方向にテキストのベースラインに揃える

異なる大きさのフォントを1行で使いたいときはテキストのベースラインを揃えると見栄えがいいです。

テキストのベースラインに揃えるにはalign-items: baseline;を指定します。

使う機会は少ないかもしれませんが、こんな微妙な指定までできるのはflexboxならではといったところでしょうか。

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

 

折り返しの方法を決める

最大幅で折り返す

テキストや要素がボックスの最大幅まで到達したとき、自動で折り返すようにします。

flex-wrap: wrap;を指定すると最大幅で折り返すことができます。

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

 

ウィンドウ幅に応じて折り返し地点を決める

例えばウィンドウが小さくなったときは折り返す、それ以外は折り返さないというような指定をしたい場合はメディアクエリを使って幅によって指定を変えましょう。

ちなみにflex-wrap: nowrap;は要素が最大幅に到達しても無視して横にはみ出るようになります。

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
@media screen and (max-width:1023px) {
  .flex-container {
    flex-wrap: wrap;
    }
}

 

子要素の幅の指定

子要素の幅の指定には以下の3つを使います。

  • flex-basis
  • flex-grow
  • flex-shrink

 

flex-shrink

基本的な幅の指定はflex-basisを使用します。

例えば以下のように指定すると最初の子要素の幅が100pxになります。

.flex-container >:first-child {
  flex-basis: 100px;
}

 

flex-grow

flex-growでは幅を指定した際に余ったスペースをどのように埋めるか、その伸縮性を相対的に指定することができます。

デフォルトの値は0となっており、0以外を指定しないと子要素は伸縮しません。

また、複数の子要素に異なるflex-growの値を指定すると、各々の子要素が指定した値に従って相対的に伸縮します。

以下の例は最初の子要素を空きスペースに対して伸縮させる指定です。

.flex-container >:first-child {
  flex-grow: 1;
}

 

flex-shrink

flex-shrinkでは幅を指定した際に足りなかったスペースをどのように調整するか、その伸縮性を相対的に指定することができます。

flex-growと違い、デフォルト値は1になっています。

スペースが足りなくなったときに子要素を伸縮させたくない場合は明示的に0を指定しましょう。

基本的に1(デフォルト)で大丈夫です。

 

また、divなどのブロック要素ではなく、spanなどのインライン要素にもフレックスボックスは適用できます。

インライン要素に直接指定できるのは便利ですね。

 

まとめ

flexboxは概念が小難しいので少し手間どうかもしれませんが、慣れてしまえがかなり強力なプロパティです。

コーディング(特にレイアウト)がかなりラクになるのでぜひ習得してみてください。