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

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

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

フレックスアイテム1
フレックスアイテム2
フレックスアイテム3

htmlとcssです。

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

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

cssです。

サンプル

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

株式会社CONFRAGE

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA