コンテンツ枠内のボタンを一番下に固定配置するCSS6パターン

コンテンツ枠内のボタンを一番下に固定配置するCSS6パターン

【HTML + CSS】リンクボタンを下部固定させるCSSについてのご紹介||広島でフリーランにてWEBデザイン・コーディング・フロントエンド制作の活動をしているWeb Studio PilgrIMAGE。

ws-pilgrimage.jp

はじめに

コンテンツ内に横並びのメニューを作った時、例えば「詳しくはコチラ」のようなボタンがテキスト量によってズレて表示されてしまっていたので、それを回避する方法を色々考えてみました。

メニュー枠を作るhtmlはいくつかありますが、ボタンの固定については、大きく「abusoluteで固定する方法」と「flexboxを使う方法」の2種類を紹介します。
どちらも見た目には大差無いと思います。