HTML
CSS
HTML5
CSS3
flexbox

Flexboxレイアウトまとめ

More than 1 year has 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