Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Flexboxレイアウトまとめ

More than 3 years have passed since last update.

Flexboxとは

Flexbox = Flexible Box Layout Module

CSS3から導入されたレイアウトモジュール
これを使うことfloatをサヨナラできます。

用語

詳しくはW3Cのflexページ

使い方

flexレイアウトを適用したい要素の親要素にflexを指定します。

.flexbox {
  display: flex;
}

または

.flexbox {
  display: inline-flex;
}

基本レイアウト

横並び

スクリーンショット 2016-07-19 15.42.36.png

DEMO

右寄せ

スクリーンショット 2016-07-19 15.46.11.png

ul {
  display: flex;
  justify-content: flex-end;
}

右寄せ(ロゴだけ左寄せ)

スクリーンショット 2016-07-19 15.44.37.png

ul {
  display: flex;
}

li:first-child {
   margin-right: auto;
}

DEMO

等間隔

各アイテムの周囲に均等なスペースを置くパターン

image.png

ul {
  display: flex;
  justify-content: space-evenly;
}

DEMO

最初のアイテムは始端にし、最後のアイテムは終端に接するパターン

image.png

ul {
  display: flex;
  justify-content: space-between;
}

DEMO

最初のアイテムの前および最後のアイテムの後ろに置かれる余白のサイズが隣接するアイテム間の余白の半分に等しくなるパターン

image.png

ul {
  display: flex;
  justify-content: space-around;
}

DEMO

グリッド

スクリーンショット 2016-07-19 15.39.06.png

子要素にflex = 1を指定すると等幅で等間隔に並びます。
比率を変えたいときは、他の要素よりも大きくしたい要素のflexに大きい数字を指定します。
何も指定しなければセルの高さも自動的に揃います。

.grid-cell {
  flex: 1;
}

.twice {
  flex: 2;
}

DEMO

固定幅と可変幅のコンテンツを組み合わせることも可能です。
スクリーンショット 2016-07-19 16.02.18.png

.flexible {
  flex: 1;
}

.fixed {
  width: 200px;
}

DEMO

Vertical Align

スクリーンショット 2016-07-19 16.42.30.png

今まで垂直方向の中央揃えは困難なものでした。
しかし、Flexboxのalign-itemsalign-selfjustify-contentを使うことで簡単に実現できます。

align-items
flexコンテナ(親要素)に指定し、すべての子要素の垂直方向の配置を設定する。
詳しくはこちら

align-self
flexアイテム(子要素)に指定し、個別に垂直方向の配置を設定する。
詳しくはこちら

justify-content
flexコンテナ(親要素)に指定し、水平方向の配置を設定する。
詳しくはこちら

<div class="contents">
    <div class="align">
        <p>それでどんどんいやたないとして楽長ただ。生ましましことでもましすると夜中の粗末者のうちがはいつも正確ならだて、みんなじゃ包みをしれんたです。見すぎ何は町でいいたて近くの狩の音楽家をわらい第一首らの練習へなっていたまし。へんは前叫んている。</p>
    </div>
</div>
.contents {
  display: flex;
  justify-content: center;
  align-items: center;
}

DEMO

3カラムレイアウト(Holy Grail Layout)

FireShot Capture 9 - CodePen - Holy Grail Layout - http___codepen.io_takanorioki4_full_YWZLWJ_.png

Flexboxを使えばこのような3カラムレイアウトも簡単に実現することができます。
このフッターはコンテンツが少ない時でも画面の下に固定されるようになっています。

今回は縦に並べたいので、bodyにflex-direction: columnを指定します。

また、navを一番左に持って行きたいので、side-navにorder: -1を指定します。

<body>
  <header>header</header>
  <div class="holyGrail">
    <main class="content">HolyGrail</main>
    <nav class="side-nav">nav</nav>
    <aside class="side-bar">side</aside>
  </div>
  <footer>footer</footer>
</body>
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 0;
}

.holyGrail {
  display: flex;
  flex: 1;
}

.content {
  flex: 1;
}

.side-nav,
.side-bar{
  width: 200px;
}

.side-nav {
  order: -1;
}

DEMO

参考

https://philipwalton.github.io/solved-by-flexbox/
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout

takanorip
都内でフロントエンドエンジニアをやっています。
https://takanorip.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away