Flexbox (display: flex)
主な用途
要素を「1次元」のフレックスコンテナ内に配置します。主に、要素を「水平」または「垂直」に整列させるために使用されます。
特徴
・要素の幅や高さを自動的に調整し、空白領域を最適に分散します。
・親要素（flex container）内の要素を水平または垂直に整列させることができます。
・コンテンツの中央揃えや、要素の順序の変更など、レイアウトの柔軟性が高いです。
CSS Grid (display: grid)
主な用途
複数の行と列からなる「2次元」のグリッドレイアウトを作成します。主に、複雑なレイアウトを構築する場合に使用されます。
特徴
・要素を「行」と「列」に配置し、複雑なグリッドレイアウトを作成します。
・要素の配置をより精密に制御できます。たとえば、grid-template-columnsおよびgrid-template-rowsプロパティを使用して、行と列のサイズを指定できます。
・親要素（grid container）とその中の子要素（grid items）を制御できる柔軟性があります。
Relative Positioning (position: relative)
主な用途
相対的な位置を持つ要素を生成します。通常、絶対的な位置を持つ子要素の基準として使用されます。
特徴
・要素が通常の文書のフローに従って配置されますが、top、right、bottom、leftのプロパティを使用して、位置を微調整できます。
・子要素の位置を、親要素または他の要素に対して相対的に調整することができます。
・相対的な位置設定は、レイアウトの一部分を微調整するのに便利ですが、全体のレイアウトを調整するのには適していません。
Float (float: left または float: right)
主な用途
要素を左または右にフロートさせ、周囲のコンテンツの回り込みを設定します。レスポンシブなレイアウト作成には向いていませんが、過去にはグリッドレイアウトを作成するために使用されていました。
特徴
・フロート要素は通常のフローから外れ、他の要素の周りに配置されます。
・フロート要素は、高さが自動的に調整されないため、クリアフィックスやclearfixテクニックが必要になることがあります。
・グリッドレイアウトや柔軟な配置には適していません。代わりに、主にレスポンシブでないページレイアウトの一部として使用されます。
終わりに
これらのレイアウト手法は、それぞれ異なるニーズに対応します。
Floatは古いレイアウト手法であり、フレックスボックスは1次元のレイアウトを、CSS Gridは2次元のレイアウトを作成するために使用されます。
相対的な位置設定は、特定の要素の微調整に使用されますが、全体のレイアウトの制御には向いていません。
参照サイト