CSSで横並びや中央寄せを作るなら、まず覚えたいのが flex です。
親要素に display: flex; を指定すると、直下の子要素を横並びにしたり、余白を均等にしたり、高さを揃えたりできます。
この記事では、CSS flexの基本から、よく検索される次の悩みまでまとめて解説します。
display: flex;で横並びにする方法justify-contentとalign-itemsの違い- 上下左右中央寄せ、左寄せ、余白均等の書き方
flex: 1;の意味と均等幅の作り方flex-wrapで折り返す方法- flexで高さが揃わない、ずれる、均等にならない原因
- レスポンシブで使いやすいflexの書き方
CSS flexの基本
flexは、親要素と子要素の関係で考えます。
親要素に display: flex; を指定すると、その直下の子要素がflexアイテムになります。
<div class="cards">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
</div>.cards {
display: flex;
gap: 16px;
}この例では、.cards がflexコンテナ、.card がflexアイテムです。
ポイントは、display: flex; を子要素ではなく親要素に指定することです。
flexで横並びにする方法
横並びにしたい要素を1つの親要素で囲み、親に display: flex; を指定します。
<nav class="nav">
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">お問い合わせ</a>
</nav>.nav {
display: flex;
gap: 24px;
}横並びの間隔は、古い書き方の margin-right よりも gap を使うと管理しやすいです。
justify-contentで横方向の位置を変える
justify-content は、主軸方向の揃え方を指定します。
初期状態の flex-direction: row; では、主軸は横方向です。
| 値 | 意味 | 使う場面 |
|---|---|---|
flex-start |
左寄せ | ナビや通常の横並び |
center |
中央寄せ | ボタンやメニューを中央に置きたい |
space-between |
両端に寄せて間を均等にする | ヘッダーの左右配置 |
space-around |
各要素の左右に余白を作る | 均等感を出したい |
space-evenly |
外側も含めて余白を均等にする | 余白を完全に均等にしたい |
.menu {
display: flex;
justify-content: center;
gap: 24px;
}display: flex; 左寄せ で調べている場合は、基本的には初期値の justify-content: flex-start; のままで左寄せになります。
もし左寄せにならない場合は、親要素の text-align、幅、余白、または別のCSSが影響していないか確認します。
align-itemsで上下方向の位置を変える
align-items は、交差軸方向の揃え方を指定します。
初期状態の横並びでは、上下方向の揃え方です。
| 値 | 意味 |
|---|---|
stretch |
子要素の高さを伸ばす。初期値 |
flex-start |
上揃え |
center |
上下中央揃え |
flex-end |
下揃え |
baseline |
文字のベースラインで揃える |
.profile {
display: flex;
align-items: center;
gap: 16px;
}画像とテキストを上下中央で揃えたいときによく使います。
flexで上下左右中央にする方法
要素を上下左右の中央に置きたい場合は、親要素に次のように指定します。
.center-box {
display: flex;
justify-content: center;
align-items: center;
min-height: 240px;
}justify-content: center; で横方向、align-items: center; で上下方向を中央にします。
上下中央にならない場合は、親要素に高さがないことが多いです。
height や min-height を指定して、中央寄せするための領域を作ります。
flex: 1とは
flex: 1; は、flexアイテムを空きスペースに合わせて伸ばす指定です。
カードを均等幅で並べたいときによく使います。
.cards {
display: flex;
gap: 16px;
}
.card {
flex: 1;
}flex は、次の3つをまとめて指定するショートハンドです。
| プロパティ | 役割 |
|---|---|
flex-grow |
余った幅をどれだけ広げるか |
flex-shrink |
狭いときにどれだけ縮むか |
flex-basis |
伸び縮みする前の基準サイズ |
実務では、まず次のように覚えると十分です。
flex: 1;は、同じ行の要素を均等に広げたいときに使うflex: 0 0 240px;は、基準幅を固定したいときに使うflex: none;は、伸び縮みさせたくないときに使う
flexで均等幅にする方法
すべての子要素を同じ幅にしたい場合は、子要素に flex: 1; を指定します。
.columns {
display: flex;
gap: 20px;
}
.column {
flex: 1;
}ただし、テキストや画像の幅が大きいと、完全に均等にならないことがあります。
その場合は、min-width: 0; を追加します。
.column {
flex: 1;
min-width: 0;
}flexアイテムは中身の幅を保とうとするため、長い文字列や画像があると縮みきれないことがあります。
min-width: 0; は、flexの「均等にならない」「はみ出る」問題でよく使う対策です。
flexで幅いっぱいに広げる方法
親要素の幅いっぱいに子要素を広げたい場合も、基本は flex: 1; です。
.search {
display: flex;
gap: 8px;
}
.search input {
flex: 1;
min-width: 0;
}検索フォームの入力欄だけを広げ、ボタンは必要な幅にしたいときに使えます。
flex-wrapで折り返す方法
横幅が足りないときに折り返したい場合は、親要素に flex-wrap: wrap; を指定します。
.tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}カードを折り返しながら並べたい場合は、子要素に基準幅を指定します。
.card-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card {
flex: 1 1 260px;
}flex: 1 1 260px; は、260pxを基準にしつつ、空きがあれば広がり、狭ければ縮むという意味です。
レスポンシブでカードを並べるときに使いやすい指定です。
flexで高さを揃える方法
flexでは、初期状態の align-items: stretch; によって、同じ行の子要素の高さが揃いやすくなります。
.cards {
display: flex;
gap: 24px;
align-items: stretch;
}
.card {
flex: 1;
}高さが揃わない場合は、次の原因を確認します。
- 親ではなく子要素に
display: flex;を指定している - 親要素に
align-items: flex-start;やcenterが指定されている - 高さを揃えたい要素が、flexの直下の子要素ではなく孫要素になっている
- 画像や内部コンテンツに別の高さ指定がある
孫要素の高さを揃えたい場合
カードの中のボタン位置や本文高さを揃えたい場合は、カード自体もflexにします。
<div class="cards">
<article class="card">
<h2>プランA</h2>
<p>短い説明です。</p>
<a href="#" class="button">詳しく見る</a>
</article>
<article class="card">
<h2>プランB</h2>
<p>少し長い説明が入ります。複数行になることもあります。</p>
<a href="#" class="button">詳しく見る</a>
</article>
</div>.cards {
display: flex;
gap: 24px;
}
.card {
display: flex;
flex: 1;
flex-direction: column;
}
.button {
margin-top: auto;
}margin-top: auto; を使うと、ボタンをカード下部に揃えられます。
flexで高さ100%や高さいっぱいにする方法
子要素を高さいっぱいにしたい場合は、親の高さが決まっている必要があります。
.layout {
display: flex;
min-height: 100vh;
}
.main {
flex: 1;
}height: 100%; が効かない場合は、親要素の高さが未定義のことが多いです。
画面いっぱいにしたいなら min-height: 100vh;、親に合わせたいなら親側にも高さを指定します。
flexがずれる・均等にならないときの確認ポイント
flexのレイアウトがずれるときは、次の順番で確認すると原因を見つけやすいです。
display: flex;を親要素に指定しているか- 横並びにしたい要素が親の直下にあるか
gap、margin、paddingが重なっていないか- 子要素に
widthやmin-widthが固定されていないか - 画像に
max-width: 100%;が指定されているか - 長い英数字やURLに
overflow-wrapが必要ではないか
特に多いのは、子要素の中身が大きすぎて縮めないケースです。
次のように指定すると、はみ出しを防ぎやすくなります。
.flex-item {
min-width: 0;
}
.flex-item img {
max-width: 100%;
height: auto;
}長いテキストの折り返しは、インライン要素とブロック要素の違い や tableでtdが改行されない原因 でも解説しています。
レスポンシブでflexを使う書き方
スマホで1列、PCで横並びにしたい場合は、メディアクエリで切り替えます。
.cards {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 768px) {
.cards {
flex-direction: row;
}
.card {
flex: 1;
min-width: 0;
}
}折り返しで自然に調整したい場合は、flex-wrap と flex-basis を組み合わせます。
.cards {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card {
flex: 1 1 280px;
}単純な横並びならflex、縦横の行と列をしっかり管理したいなら CSS Grid が向いています。
flexのチートシート
よく使う指定をまとめると、次のようになります。
| やりたいこと | CSS |
|---|---|
| 横並び | display: flex; |
| 横方向中央 | justify-content: center; |
| 上下中央 | align-items: center; |
| 上下左右中央 | justify-content: center; align-items: center; |
| 余白を均等 | justify-content: space-between; または space-evenly |
| 均等幅 | 子要素に flex: 1; |
| 折り返し | flex-wrap: wrap; |
| 縦並び | flex-direction: column; |
まとめ
CSS flexは、横並び、中央寄せ、均等幅、高さ揃えを少ないコードで作れる便利なレイアウト機能です。
最初は次の4つを覚えると使いやすくなります。
- 親要素に
display: flex;を指定する - 横方向は
justify-content、上下方向はalign-itemsで揃える - 均等幅にしたい子要素には
flex: 1;を指定する - 折り返したい場合は
flex-wrap: wrap;を使う
横一列の配置や部品の整列はflex、ページ全体やカード一覧のような二次元レイアウトはGrid、と考えると使い分けしやすいです。
関連記事
- CSS Gridの使い方｜2列・レスポンシブ・repeat・grid-area・flexとの使い分け
- CSS displayの使い方｜インライン・ブロック・display: contentsまで解説
- CSSで行の高さを調整するやり方
- HTMLのtableでtdが改行されない原因とCSSで折り返す方法