CSSのflex-directionでフッターを固定する方法

2018/11/19 CSS

CSSのflex-directionでフッターを固定する方法

flex-directionプロパティを使用すると、子要素を左から右、右から左、上から下、下から上といったように表示することができるようになります。

フレックスアイテム1

フレックスアイテム2

フレックスアイテム3

htmlとcssです。

<div style="display: flex; flex-direction: column;">
  <div style="width: 100px; height: 100px; background-color: gray;">フレックスアイテム1</div>
  <div style="width: 100px; height: 100px; background-color: gray;">フレックスアイテム2</div>
  <div style="width: 100px; height: 100px; background-color: gray;">フレックスアイテム3</div>
</div>

<div style="width: 100px; height: 100px; background-color: gray;">フレックスアイテム1</div>

<div style="width: 100px; height: 100px; background-color: gray;">フレックスアイテム2</div>

<div style="width: 100px; height: 100px; background-color: gray;">フレックスアイテム3</div>

</div>

flex-direction: column;としているので、フレックスアイテムが上から下に表示されています。

この仕組みを利用して一番最後のフレックスアイテムをブラウザの一番下にもっていきます。

<div class="container">
  <div class="header">フレックスアイテム1</div>
  <div class="main">フレックスアイテム2</div>
  <div class="footer">フレックスアイテム3</div>
</div>

<div class="header">フレックスアイテム1</div>

<div class="main">フレックスアイテム2</div>

<div class="footer">フレックスアイテム3</div>

</div>

cssです。

body {
  margin: 0;
}
.container{
  display: flex;
  flex-direction:column;
  height:100vh;
}
.header {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.main {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.footer {
  margin-top: auto;
  border: 1px solid black;
}

body {

margin: 0;

}

.container{

display: flex;

flex-direction:column;

height:100vh;

}

.header {

width: 100px;

height: 100px;

border: 1px solid black;

}

.main {

width: 100px;

height: 100px;

border: 1px solid black;

}

.footer {

margin-top: auto;

border: 1px solid black;

}

サンプル

一番下にもっていきたい子要素にmargin-top: auto;とすることによってフッターを一番下にもっていくことが可能になります。

高橋

関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
組込を社内で見習い勉強中です！
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^