Flexboxで、Sticky Footerを作成する

Flexboxを使い、コンテンツエリアの画面の100%に満たなくても フッターが画面の下に付くようなフッターを作成します。

※ このドキュメントは2016年5月26日に勧告候補になったドキュメント「CSS Flexible Box Layout Module Level 1 W3C Candidate Recommendation, 26 May 2016」を参照しています。

 

 

方法

 

まずはじめにソースコードを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Flexboxテスト</title>
    <meta charset="UTF-8">
<style>
.flex-container {
  display: flex;
  flex-direction: column;
}
.wrapper{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
 
 }
 
.flex-item {
  flex: 1;
  background-color: #ee0;
}

html,body{
  margin: 0;
}

header{
    height: 50px;
  background-color: #ccc;
}

footer{
    height: 50px;
  background-color: #ccc;
}
</style>
</head>
<body>
<div class="flex-container">
    <div class="wrapper">

        <header>ヘッダー</header>
        <div class="flex-item">
            <p>コンテンツエリア</p>
        </div>
        <footer>フッター</footer>

    </div>
</div>

</body>
</html>

 

解説

 

  1. flex-containerと、wrapperに対して、Flexboxの指定である「display: flex;」を定義します。
  2. flex-containerと、wrapperは「flex-direction: column;」を指定して、Flex Itemの並び順を、縦に指定します。
  3. wrapperに高さ100%を指定するために、「min-height: 100vh;」を指定します。
  4. <headr>、<div class="flex-item">、<footer>がflex-itemになります。
    flex-itemクラスには「flex: 1;」を指定し、横幅いっぱいに枠を広げる指定をします。

 

ポイント

flex-direction
flex itemの並び順の指定です。デフォルトはrowで、横並び、columnを指定で、縦並び。
その他に「row-reverse | column-reverse」があり、逆に並び替えをします。

flex

「flex:1」の指定は横幅をいっぱいまで広げるために使用しており、flex 1 1 auto;と同義です。プロパティの指定は下記の通りです。

【flexプロパティ】
flex:<flex-grow> <flex-shrink> <flex-basis>

flex-grow:横幅として何個分使用するか。
flex-shrink:指定の幅をはみ出した時に、全体の何個分縮めるか。
flex-basis:flex itemのベースとなる幅数

【flex初期値】
flex:1 0 auto;

※ 分かりにくいので動画を参照ください。

 

関連記事

 

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。