Flexboxを使い、コンテンツエリアの画面の100%に満たなくても フッターが画面の下に付くようなフッターを作成します。
※ このドキュメントは2016年5月26日に勧告候補になったドキュメント「CSS Flexible Box Layout Module Level 1 W3C Candidate Recommendation, 26 May 2016」を参照しています。
「Webサイトからお問い合わせが来ない…」とお悩みの方必見！
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供
方法
まずはじめにソースコードを紹介します。
<!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>
解説
- flex-containerと、wrapperに対して、Flexboxの指定である「display: flex;」を定義します。
- flex-containerと、wrapperは「flex-direction: column;」を指定して、Flex Itemの並び順を、縦に指定します。
- wrapperに高さ100%を指定するために、「min-height: 100vh;」を指定します。
- <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;
※ 分かりにくいので動画を参照ください。
関連記事
