flexbox vs position vs margin: 徹底比較で最適な方法を見つける

HTMLとCSSを使ってdivをコンテナの一番下に配置する方法

position: absoluteを使う

この方法は、divを絶対位置に配置する方法です。親要素に対してdivの位置を指定できます。

HTML

<div class="container">
  <div class="my-div">
    コンテンツ
  </div>
</div>

CSS

.container {
  position: relative;
}

.my-div {
  position: absolute;
  bottom: 0;
  left: 0;
}

このコードでは、position: relative を使って親要素 .container を相対位置に設定しています。そして、position: absolute を使って子要素 .my-div を絶対位置に設定しています。bottom: 0 と left: 0 を使って、.my-div を親要素の左下端に配置しています。

flexboxは、要素を柔軟に配置するためのレイアウトシステムです。

<div class="container">
  <div class="my-div">
    コンテンツ
  </div>
</div>

.container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.my-div {
  margin: 0;
}

このコードでは、display: flex を使って親要素 .container をflexboxレイアウトに設定しています。justify-content: flex-end を使って、子要素を水平方向に右端に配置しています。align-items: flex-end を使って、子要素を垂直方向に下端に配置しています。

marginプロパティを使って、divの上下に余白を設定することができます。

<div class="container">
  <div class="my-div">
    コンテンツ
  </div>
</div>

.container {
  height: 100vh;
}

.my-div {
  margin-top: auto;
  margin-bottom: 0;
}

このコードでは、height: 100vh を使って親要素 .container の高さを100vh（ビューポートの高さ）に設定しています。そして、margin-top: auto を使って、子要素 .my-div の上部に自動的に余白を設定しています。margin-bottom: 0 を使って、下部に余白を設定しています。

divをコンテナの一番下に配置するには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがありますので、目的に合った方法を選択してください。

position: absoluteを使う

<div class="container">
  <div class="my-div">
    コンテンツ
  </div>
</div>

.container {
  position: relative;
}

.my-div {
  position: absolute;
  bottom: 0;
  left: 0;
}

flexboxを使う

<div class="container">
  <div class="my-div">
    コンテンツ
  </div>
</div>

.container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.my-div {
  margin: 0;
}

marginを使う

<div class="container">
  <div class="my-div">
    コンテンツ
  </div>
</div>

.container {
  height: 100vh;
}

.my-div {
  margin-top: auto;
  margin-bottom: 0;
}

divをコンテナの一番下に配置する他の方法

<div class="container">
  <div class="my-div">
    コンテンツ
  </div>
</div>

.container {
  display: grid;
  place-items: end;
}

.my-div {
  margin: 0;
}

このコードでは、display: grid を使って親要素 .container をグリッドレイアウトに設定しています。place-items: end を使って、子要素 .my-div を水平方向と垂直方向に右下端に配置しています。

position: fixed を使って、divを画面に固定することができます。

<div class="my-div">
  コンテンツ
</div>

.my-div {
  position: fixed;
  bottom: 0;
  left: 0;
}

このコードでは、position: fixed を使って子要素 .my-div を画面に固定しています。bottom: 0 と left: 0 を使って、.my-div を画面の左下端に配置しています。

pseudo-elementを使って、divの下に余白を追加することができます。

<div class="container">
  <div class="my-div">
    コンテンツ
  </div>
</div>

.container {
  position: relative;
}

.my-div {
  position: absolute;
  bottom: 0;
  left: 0;
}

.my-div::after {
  content: "";
  display: block;
  height: 100vh;
}

JavaScriptを使って、divの位置を動的に変更することができます。

<div class="container">
  <div class="my-div">
    コンテンツ
  </div>
</div>

const myDiv = document.querySelector(".my-div");

myDiv.style.bottom = 0;
myDiv.style.left = 0;

このコードでは、querySelector を使って .my-div 要素を取得しています。そして、style プロパティを使って、.my-div の位置を左下端に設定しています。