CSS Flexbox入門：もう横並びレイアウトで悩まないための基本ガイド

公開日: 2025年9月21日

Web制作の学習を始めたばかりの頃、僕が最も頭を抱えたのが「要素の横並び」でした。

当時はまだ float: left; を使うのが主流で、これを指定するたびに親要素の高さが消えたり、下の要素が変な隙間に入り込んだり...。「レイアウト崩れ」という悪魔と戦うだけで、休日が丸一日潰れたこともありました。

「もっと直感的に、簡単にレイアウトしたいだけなのに！」

そんな僕の悩みを一撃で解決してくれたのが、現代CSSの神器、Flexbox（Flexible Box Layout）です。

初めてこれを使った時、「え、たった1行でいいの？」と感動して声が出たのを覚えています。今回は、当時の僕のようなレイアウト難民を救うべく、Flexboxの基本を実体験を交えて解説します。

Flexboxの基本：親と子の関係

Flexboxを理解するための最も重要なコンセプトは、「親要素（コンテナ）」と「子要素（アイテム）」の関係です。
Flexboxのプロパティは、親要素に指定するものと、子要素に指定するものに分かれています。まずは、親に指定する最も重要なプロパティから見ていきましょう。

すべての魔法は、この一行から始まります。親要素に display: flex;を指定するだけで、その直下の子要素は、ブロック要素（通常は縦に積まれる）であっても、自動的に横並びになります。

CSS:

.container {
    display: flex;
}

結果:

たったこれだけです。昔の僕らが必死に書いていた clearfix とかいう謎の呪文はもう必要ありません。これを知った時の開放感と言ったらなかったです。

display: flex; を指定したら、次はこの横並びになったアイテムたちを、どのように配置するかを決めていきます。

これは、アイテムを横方向（主軸）に、どのように揃えるかを決めるプロパティです。実務でも、ヘッダーメニュー（ロゴを左、ナビを右）を作る時などに毎日使います。

CSS (中央揃えの例):

.container {
    display: flex;
    justify-content: center;
}

結果:

これは、アイテムを縦方向（交差軸）に、どのように揃えるかを決めるプロパティです。

個人的にFlexboxで一番感動したのがこれです。昔は「上下中央揃え」をするためだけに、position: absoluteやtransformを使って複雑な計算をしていました。それがたった1行で終わるんです。

CSS (上下中央揃えの例):

.container {
    display: flex;
    align-items: center;
    height: 150px; /* 親の高さが必要 */
}

結果:

Flexboxには、他にもたくさんの便利なプロパティがありますが、初心者が最初に覚えるべきなのは、間違いなくこの3つです。

この3つを覚えるだけで、過去の僕が半日かけていた作業が5分で終わるようになります。ぜひ、あなたのサイトで実際に試してみてください。「SerchCode Pro」で display: flex と検索して、色々な実行例を見てみるのも面白いですよ！

#CSS　勉強独学プログラマー　#HTML　勉強 #

記事で紹介したコードがよく分からなかったり、ご自身のコードについてもっと知りたい場合は、AIコード解説ツールが便利です。コードを貼り付けるだけで、AIが日本語で分かりやすく解説します。