2026.03.19 昨日

今さら聞けない！CSSの「Flexbox」って何？どう書くの？ 🚀

Webサイトを作っている時、「要素を横に並べたい」「真ん中に配置したい」と思ったことはありませんか？そんな時に大活躍するのが Flexbox（フレックスボックス） です。

以前は float などを使って苦労していたレイアウトも、Flexboxを使えば驚くほど簡単に、そして柔軟に作ることができます。今回は、その基本をサクッと解説します！

1. Flexboxとは？ 🧐

Flexboxは、要素の配置をコントロールするための 「レイアウトモード」 の一つです。
親要素に1行コードを書くだけで、子要素を自由自在に並べることができます。

Flexboxの最大のメリット

要素を簡単に 横並び にできる
中央揃え（上下左右）がたった数行で完結する
要素の 順番を入れ替える のも自由自在
画面サイズに合わせた レスポンシブ対応 がしやすい

2. 基本の書き方：まずはここから！ 🛠️

使い方はとてもシンプルです。並べたい要素の「親」に対して、以下のコードを指定するだけです。

.container {
  display: flex; /* これが魔法の合言葉！ */
}

これだけで、中にある子要素（アイテム）が自動的に 横一列 に並びます。

3. よく使う便利なプロパティ ✨

親要素に display: flex; を書いた後、さらに以下のプロパティを追加することで、配置を細かく調整できます。

🏠 横方向の揃え方（justify-content）

flex-start: 左寄せ（デフォルト）
center: 中央揃え
space-between: 両端に寄せて、間を均等に空ける

🏢 縦方向の揃え方（align-items）

center: 上下の中央揃え
stretch: 親要素の高さに合わせて引き伸ばす（デフォルト）

まとめ：まずは触ってみよう！ 📝

Flexboxは、現代のWebデザインにおいて 欠かせないスキル です。
まずは「親要素に display: flex; 」と書くところから始めてみてください。これだけで、レイアウトの悩みの半分は解決すると言っても過言ではありません！

Tips:
「要素を画面のど真ん中に置きたい！」と思ったら、親要素にこれだけ書けばOKです。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

これだけで、上下左右ピッタリ中央になります！🎯

もっと複雑なレイアウトに挑戦したくなったら、さらに読み進めて下さい。🌈

今さら聞けない！CSS Flexboxの「flex」プロパティって何？ 🚀

ここまでは親要素に指定する display: flex; を紹介しましたが、実は 子要素（フレックスアイテム） に直接指定するプロパティを使いこなすと、レイアウトの自由度がさらに跳ね上がります！

1. 魔法のショートハンド「flex」プロパティ ✨

子要素に flex: 1; と書いているコードをよく見かけませんか？これは、以下の3つの設定を一度に行える便利な ショートハンド（省略記法） です。

flex-grow（伸びる比率）: 余ったスペースをどれだけ分け合うか
flex-shrink（縮む比率）: スペースが足りない時にどれだけ縮むか
flex-basis（ベースの大きさ）: 伸び縮みする前の「基準」となるサイズ

2. 三銃士の役割を詳しくチェック 🧐

子要素がどのように振る舞うかを決める3つの要素を紐解いていきましょう。

🌱 flex-grow (伸びる力)

親要素に余白があるとき、その余白をどれくらいの比率で奪い合うかを決めます。

すべての子要素に flex-grow: 1; を指定すると、均等に横幅を広げて親要素を埋め尽くします。
特定の要素だけ 2 にすると、他の要素（1の場合）の2倍の広さで伸びようとします。

📉 flex-shrink (縮む力)

画面が狭くなり、要素が入り切らなくなった時の「踏ん張り具合」です。

デフォルトは 1 です。
0 を指定すると、「絶対に縮まない（サイズを維持する）」 という強い意志を持たせることができます。ロゴやアイコンなど、形を崩したくないものに最適です。

📏 flex-basis (基本のサイズ)

伸び縮み計算を始める前の「スタート地点」のサイズです。px や % で指定しますが、基本的には auto（中身のサイズに合わせる）にしておくことが多いです。

3. よく使う「鉄板」の設定例 🛠️

実務で特によく使う組み合わせをご紹介します！

✅ `flex: 1;` （すべてを均等に！）

flex: 1 1 0; の略。余白をすべて使い切り、複数の要素を同じ幅でピッタリ並べたい時に最強の指定です。

✅ `flex: 0 0 200px;` （固定幅をキープ！）

サイドバーのように、「画面が狭くなっても絶対に200pxから動かしたくない」 という時に使います。

まとめ：子要素を操ればレイアウトは思いのまま！ 📝

親要素で全体の「並び方」を決め、子要素の flex プロパティで「個々の個性を出す」。
この2段階をマスターすれば、どんな複雑なデザインも怖くありません！まずはブラウザのデベロッパーツールで、数値を 1 や 2 に入れ替えて遊んでみてくださいね。🌈

---
参照元URL:

MDN Web Docs - Flexbox の基本: https://developer.mozilla.org/ja/docs/Learn/CSS/CSSlayout/Flexbox
CSS-Tricks - A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

このページのURL:

Nekoppsニュースは全ページリンクフリーです。