[CSS]Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ

サイト構築 -CSS

Post on:2016年2月17日

sponsorsr

今まで出来なかったこと、かなり複雑なコードでスクリプトを併用しないと実装できなかったことをシンプルなHTMLとCSSで実装するFlexboxのテクニックを紹介します。

Solved by Flexbox
Solved by Flexbox -GitHub

各コードの対応ブラウザは、Flexboxを使用しているため下記の通りです。

Chrome 21+
Opera 12.1+
Firefox 22+
Safari 6.1+
IE 10+

コードのライセンスはMITライセンスです。

「clearfix」「overflow: hidden」から卒業
高さが分からないフッタを常に最下部に表示
高さが分からない要素を天地左右の中央に配置
レスポンシブ対応の3カラムをシンプルなコードで実装
Flexboxを使った柔軟なグリッド
入力フィールドとボタンの高さを揃えて、くっつけて配置

「clearfix」「overflow: hidden」から卒業

Flexboxは複数のアイテムをコンテナ内に水平・垂直に一列に配置することができ、順番を変更するのも簡単です。テキストが画像に回り込むレイアウトなども、Flexboxでは簡単でシンプルなコードで実装できます。

Media Object
source -GitHub

HTML

画像とテキスト、あとはコンテナだけのシンプルなコードです。

<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">…</p>
</div>

</div>

CSS

「display: flex;」を指定し、「align-items: flex-start;」でコンテナの始点に配置させます。

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

.Media-figure {
  margin-right: 1em;
}

.Media-body {
  flex: 1;
}

.Media {

display: flex;

align-items: flex-start;

}

.Media-figure {

margin-right: 1em;

}

.Media-body {

flex: 1;

}

Flexboxの各プロパティの使い方は、下記を参考に。

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

高さが分からないフッタを常に最下部に表示

フッタの表示をコンテンツの量が少なくても、常に最下部に表示します。
Flexboxを使わないテクニックではフッタに高さを指定しないと機能しませんでしたが、Flexboxを使うと高さが不明でも機能します。
参考: フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック

Sticky Footer
※コンテンツの量を少なくする時は、「Toggle Contetns」をクリックしてください。
source -GitHub

HTML

ヘッダ・コンテンツ・フッタのシンプルな構造です。

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

</body>

CSS

全体をViewport Heightで指定し、Flexboxでフッタを配置します。
参考: ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

.Site {

display: flex;

min-height: 100vh;

flex-direction: column;

}

.Site-content {

flex: 1;

}

高さが分からない要素を天地左右の中央に配置

高さが分からない要素を外側の容器の高さが不明でも天地左右の中央に配置します。

Vertical Centering
source -GitHub

HTML

.Alignerは天地左右の中央、.Aligner-item--topは上付き、.
Aligner-item--bottomは下付きです。

<div class="Aligner">
  <div class="Aligner-item Aligner-item--top">…</div>
  <div class="Aligner-item">…</div>
  <div class="Aligner-item Aligner-item--bottom">…</div>
</div>

</div>

CSS

IE10+であれば、これが一番確実でシンプルです。

.Aligner { /* 天地左右の中央 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
  max-width: 50%;
}

.Aligner-item--top { /* 上付き */
  align-self: flex-start;
}

.Aligner-item--bottom { /* 下付き */
  align-self: flex-end;
}

.Aligner { /* 天地左右の中央 */

display: flex;

align-items: center;

justify-content: center;

}

.Aligner-item {

max-width: 50%;

}

.Aligner-item--top { /* 上付き */

align-self: flex-start;

}

.Aligner-item--bottom { /* 下付き */

align-self: flex-end;

}

要素をビューポートの天地左右の中央に配置したい場合は、下記を参考に。

高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ

レスポンシブ対応の3カラムをシンプルなコードで実装

3カラム、左からメニュー、コンテンツ、広告スペースなどのレイアウトは、Flexbox以前は完璧な解決方法はありませんでした。

Holy Grail Layout
source -GitHub

3カラムの条件

サイドバーは固定で、コンテンツは可変。
コンテンツのコードが、HTMLソースで最初に記述。
3つのカラムの高さは、最も高いものに揃える。
マークアップは最小で。
コンテンツが少ない時、フッタはページの最下部に表示。

HTML

HTMLは非常にシンプルで、3カラムの中でコンテンツが最初に記述されます。

<body class="HolyGrail">
  <header>…</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">…</main>
    <nav class="HolyGrail-nav">…</nav>
    <aside class="HolyGrail-ads">…</aside>
  </div>
  <footer>…</footer>
</body>

</div>

</body>

CSS

まずは、フッタの表示をコンテンツが少ない時でも最下部に表示されるように指定。

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail {

display: flex;

min-height: 100vh;

flex-direction: column;

}

.HolyGrail-body {

display: flex;

flex: 1;

}

3カラムはコンテンツを可変に、3つのカラムの高さを揃えます。

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 12em is the width of the columns */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* put the nav on the left */
  order: -1;
}

.HolyGrail-content {

flex: 1;

}

.HolyGrail-nav, .HolyGrail-ads {

/* 12em is the width of the columns */

flex: 0 0 12em;

}

.HolyGrail-nav {

/* put the nav on the left */

order: -1;

}

ついでに、レスポンシブ対応にしましょう。
モバイルファーストでスマホ用からレイアウトします。スマホ時には3カラムの表示を上から順にメニュー、コンテンツ、広告スペースにします。

.HolyGrail,
.HolyGrail-body {
  display: flex;
  flex-direction: column;
}

.HolyGrail-nav {
  order: -1;
}

@media (min-width: 768px) {
  .HolyGrail-body {
    flex-direction: row;
    flex: 1;
  }
  .HolyGrail-content {
    flex: 1;
  }
  .HolyGrail-nav, .HolyGrail-ads {
    /* 12em is the width of the columns */
    flex: 0 0 12em;
  }
}

.HolyGrail,

.HolyGrail-body {

display: flex;

flex-direction: column;

}

.HolyGrail-nav {

order: -1;

}

@media (min-width: 768px) {

.HolyGrail-body {

flex-direction: row;

flex: 1;

}

.HolyGrail-content {

flex: 1;

}

.HolyGrail-nav, .HolyGrail-ads {

/* 12em is the width of the columns */

flex: 0 0 12em;

}

Flexboxを使った柔軟なグリッド

Flexboxを使って、柔軟なグリッドを実装します。

Simpler Grid System
source -GitHub

HTML

Flexboxを使ったグリッドの基本構成は、アイテムとそれらを内包するコンテナです。

<div class="Grid">
  <div class="Grid-cell">…</div>
  <div class="Grid-cell">…</div>
  <div class="Grid-cell">…</div>
</div>

</div>

CSS

ベースとなるグリッドシステムです。

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

.Grid {

display: flex;

}

.Grid-cell {

flex: 1;

}

Flexboxではさまざまなプロパティが用意されており、溝や順番や配置を簡単に指定できます。

/* With gutters */
.Grid--gutters {
  margin: -1em 0 0 -1em;
}
.Grid--gutters > .Grid-cell {
  padding: 1em 0 0 1em;
}

/* Alignment per row */
.Grid--top {
  align-items: flex-start;
}
.Grid--bottom {
  align-items: flex-end;
}
.Grid--center {
  align-items: center;
}

/* Alignment per cell */
.Grid-cell--top {
  align-self: flex-start;
}
.Grid-cell--bottom {
  align-self: flex-end;
}
.Grid-cell--center {
  align-self: center;
}

/* With gutters */

.Grid--gutters {

margin: -1em 0 0 -1em;

}

.Grid--gutters > .Grid-cell {

padding: 1em 0 0 1em;

}

/* Alignment per row */

.Grid--top {

align-items: flex-start;

}

.Grid--bottom {

align-items: flex-end;

}

.Grid--center {

align-items: center;

}

/* Alignment per cell */

.Grid-cell--top {

align-self: flex-start;

}

.Grid-cell--bottom {

align-self: flex-end;

}

.Grid-cell--center {

align-self: center;

}

レスポンシブ対応も非常に簡単です。

/* Base classes for all media */
.Grid--fit > .Grid-cell {
  flex: 1;
}
.Grid--full > .Grid-cell {
  flex: 0 0 100%;
}
.Grid--1of2 > .Grid-cell {
  flex: 0 0 50%
}
.Grid--1of3 > .Grid-cell {
  flex: 0 0 33.3333%
}
.Grid--1of4 > .Grid-cell {
  flex: 0 0 25%
}

/* Small to medium screens */
@media (min-width: 24em) {
  .small-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .small-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .small-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%
  }
  .small-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%
  }
  .small-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%
  }
}

/* Large screens */
@media (min-width: 48em) {
  .large-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .large-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .large-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%
  }
  .large-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%
  }
  .large-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%
  }
}

/* Base classes for all media */

.Grid--fit > .Grid-cell {

flex: 1;

}

.Grid--full > .Grid-cell {

flex: 0 0 100%;

}

.Grid--1of2 > .Grid-cell {

flex: 0 0 50%

}

.Grid--1of3 > .Grid-cell {

flex: 0 0 33.3333%

}

.Grid--1of4 > .Grid-cell {

flex: 0 0 25%

}

/* Small to medium screens */

@media (min-width: 24em) {

.small-Grid--fit > .Grid-cell {

flex: 1;

}

.small-Grid--full > .Grid-cell {

flex: 0 0 100%;

}

.small-Grid--1of2 > .Grid-cell {

flex: 0 0 50%

}

.small-Grid--1of3 > .Grid-cell {

flex: 0 0 33.3333%

}

.small-Grid--1of4 > .Grid-cell {

flex: 0 0 25%

}

/* Large screens */

@media (min-width: 48em) {

.large-Grid--fit > .Grid-cell {

flex: 1;

}

.large-Grid--full > .Grid-cell {

flex: 0 0 100%;

}

.large-Grid--1of2 > .Grid-cell {

flex: 0 0 50%

}

.large-Grid--1of3 > .Grid-cell {

flex: 0 0 33.3333%

}

.large-Grid--1of4 > .Grid-cell {

flex: 0 0 25%

}

Flexboxの各プロパティの使い方は、下記を参考に。

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

入力フィールドとボタンの高さを揃えて、くっつけて配置

フルサイズの可変で、しかも高さが揃った入力フィールドとボタンのセットを実装することは、今まで不可能でした。しかし、Flexboxを使うと、驚くほどシンプルなコードでこれを実装できます。

Input Add-ons
source -GitHub

HTML

入力フィールドとボタンはどちらが前で後ろでも前後でも、同じ高さで実装できます。

<!-- appending -->
<div class="InputAddOn">
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">…</button>
</div>

<!-- prepending -->
<div class="InputAddOn">
  <span class="InputAddOn-item">…</span>
  <input class="InputAddOn-field">
</div>

<!-- both -->
<div class="InputAddOn">
  <span class="InputAddOn-item">…</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">…</button>
</div>

</div>

</div>

</div>

CSS

スタイルシートは非常にシンプルです。あとは入力フィールドとボタンのスタイルを指定してください。

.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
  /* 入力フィールドのスタイル */
}

.InputAddOn-item {
  /* ボタンのスタイル */
}

.InputAddOn {

display: flex;

}

.InputAddOn-field {

flex: 1;

/* 入力フィールドのスタイル */

}

.InputAddOn-item {

/* ボタンのスタイル */

}

[CSS]Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ

「clearfix」「overflow: hidden」から卒業

HTML

CSS

高さが分からないフッタを常に最下部に表示

HTML

CSS

高さが分からない要素を天地左右の中央に配置

HTML

CSS

レスポンシブ対応の3カラムをシンプルなコードで実装

3カラムの条件

HTML

CSS

Flexboxを使った柔軟なグリッド

HTML

CSS

入力フィールドとボタンの高さを揃えて、くっつけて配置

HTML

CSS

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

[CSS]Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ

「clearfix」「overflow: hidden」から卒業

HTML

CSS

高さが分からないフッタを常に最下部に表示

HTML

CSS

高さが分からない要素を天地左右の中央に配置

HTML

CSS

レスポンシブ対応の3カラムをシンプルなコードで実装

3カラムの条件

HTML

CSS

Flexboxを使った柔軟なグリッド

HTML

CSS

入力フィールドとボタンの高さを揃えて、くっつけて配置

HTML

CSS

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info