【CSS】要素を横並びにするFlexbox、Gridを解説!!

シュウ

今回は【CSS】要素を横並びにするFlexbox、Gridの解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ!! Flexbox、Gridを学べます！
「横並び」にしたいだけなのに、なぜかうまくいかない、という経験がある方。
float以外の、FlexboxやGridのような新しい技術をまだ使ったことがない方。

[記事の内容]

要素を横並びにする方法について

要素を「横並び」にしたいだけなのに、なぜかうまくいかない、という経験がある方多いとおもいます。
要素を「横並び」にする方法はいくつかあります。
まずは、メリット、デメリットを理解しておきましょう。

Flexboxについて

最も一般的で推奨される方法です。
親要素にdisplay: flexを指定することで、子要素が自動的に横並びになります。

メリット

シンプルで直感的で少ないコードで複雑なレイアウトを簡単に作成できます。
justify-contentやalign-itemsを使うことで、要素の水平・垂直方向の配置や間隔を自由に調整できます。
レスポンシブ対応し、画面サイズに応じて要素の並び順や表示を変えるのが簡単です。

デメリット

行または列のいずれか一方向にしか要素を配置できません。二次元の複雑な配置には不向きです。

Flexboxについて

<ul>
 <li>1</li>
 以下省略
</ul>

ul {
 display: flex;
 justify-content: space-between; /*--均等に配置--*/
}

上記のように、親要素に、display: flexを指定することにより、子要素である、liタグは自動で横並びになります。
更に、justify-content: space-betweenをしてすることにより、最初を開始点に、最後を終了点に、残りは均等に配置します。

注意するポイント！
liタグには、display: flexを指定しても、横並びにはならないので注意してください。

また、水平・垂直方向の配置や間隔を自由に調整できますので、以下の記事を参考にしてみてください。

水平・垂直方向の配置について解説

【CSS】align-itemsの使い方

上部や下部、高さに合わせて自動調整が可能になります。

Gridについて

二次元（行と列）のグリッドを作成し、要素を配置する方法です。
複雑なレイアウトや、レイアウト全体を制御したい場合に適しています。

メリット

行と列を同時に扱えるため、複雑なレイアウトを直感的に作成できます。
grid-template-columnsやgrid-template-rowsでグリッドの構造を細かく定義できます。
grid-columnやgrid-rowを使って、特定のセルに要素を配置できます。

デメリット

flexboxに比べて覚えるプロパティが多く、初心者には少し難しく感じられるかもしれません。

Gridについて

<ul>
 <li>1</li>
 以下省略
</ul>

ul {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 1rem;
}

上記の親要素にdisplay: gridを指定します。
grid-template-columns: repeat(5, 1fr)を指定することにより、5つの列を作成することを意味します。
1frは、「fraction（分数）」の略で、利用可能なスペースを均等に分割することを意味します。
「利用可能なスペースを均等に分割する5つの列を作成する」という指示になります。

gap: 1remとは、行間の隙間、列間の隙間を1remの隙間を開ける事を示しています。

Grid Layoutの使い方