Webページを作成する際、ナビゲーションメニューやカード型のコンテンツなど、HTML要素を横並びに配置したい場面は数多くあります。従来はfloatやinline-blockなどが使われていましたが、現在はFlexboxが横並びレイアウトの新定番となっています。
Flexboxはdisplay:flexを親要素に指定するだけで、子要素を横並びにできる便利な機能です。さらに、justify-contentやalign-itemsなどのプロパティを組み合わせることによって、要素の配置を柔軟に調整できます。
この記事では、CSSのFlexboxで要素を横並びにする方法、そして横並びにした要素の配置を調整するテクニックについて解説していきます。
CSSのFlexboxで要素を横並びにする方法
CSSのFlexboxは親要素にdisplay:flexを指定することで、子要素を横並びに配置できるレイアウト手法です。要素を横並びにするには、以下3つを理解する必要があります。
- display:flexを親要素に指定する
- flex-directionで並び方向を指定する
- flex-wrapで複数行に折り返す
それぞれの方法について、具体的なコード例と共に詳しく解説していきます。
display:flexを親要素に指定する
Flexboxで要素を横並びにする基本的な方法は、親要素にdisplay:flexを指定することです。この一行を追加するだけで、子要素は自動的に横並びに配置されます。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
background-color: #3498db;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
上記のコードでは、containerクラスにdisplay:flexを指定しており、container内のdiv要素が横並びに配置されます。display:flexを指定した要素はFlexコンテナと呼ばれ、その直下の子要素はFlexアイテムとして扱われます。
Flexboxの初期設定だと、子要素は左から右へ横並びに配置され、親要素の幅に応じて自動的にサイズが調整されます。この特性により、レスポンシブなレイアウトを簡単に実現できます。
【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」
flex-directionで並び方向を指定する
flex-directionプロパティは、Flexアイテムの並び方向を指定するプロパティです。初期値はrowで左から右へ横並びになりますが、row-reverseを指定すると右から左へ並びます。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row-reverse;
}
.item {
width: 100px;
height: 100px;
background-color: #e74c3c;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
上記のコードでは、flex-direction:row-reverseを指定しており、要素が右から左へ並びます。flex-directionには、row（左から右）、row-reverse（右から左）、column（上から下）、column-reverse（下から上）の4つの値を指定できます。
横並びを実現する場合は、rowまたはrow-reverseを使用します。columnやcolumn-reverseは縦並びになるため、横並びレイアウトには適していません。
flex-wrapで複数行に折り返す
flex-wrapプロパティは、Flexアイテムが親要素の幅を超えた場合、次の行へ折り返すかどうかを指定するプロパティです。初期値はnowrapで折り返しませんが、wrapを指定すると複数行に折り返して配置されます。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 400px;
}
.item {
width: 100px;
height: 100px;
background-color: #2ecc71;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
上記のコードでは、containerの幅を400pxに制限し、flex-wrap:wrapを指定しています。これにより、親要素の幅に収まりきらない要素は、自動的に次の行へ折り返されます。flex-wrapを指定しない場合、要素は縮小されて一行に収まるように調整されます。
CSSのFlexboxで横並びの配置を調整する方法
CSSのFlexboxでは、要素を横並びにするだけではなく、配置も細かく調整できます。justify-contentやalign-itemsといったプロパティを使用することで、左寄せ、中央寄せ、均等配置など、様々なレイアウトパターンを実現できます。
横並びの配置を調整するには、以下3つを理解する必要があります。
- justify-contentで横方向の配置を調整する
- align-itemsで縦方向の配置を調整する
- gapで要素間の余白を指定する
これらのプロパティを組み合わせることで、デザインに応じた柔軟な配置が可能になります。以下では、各プロパティの具体的な使い方を詳しく解説します。
【PR】『Python』を学べる企業・個人向けのプログラミングコース
justify-contentで横方向の配置を調整する
justify-contentプロパティは、Flexアイテムの横方向（主軸方向）の配置を指定するプロパティです。左寄せ、右寄せ、中央寄せ、均等配置など、様々な配置パターンを実現できます。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
background-color: #ecf0f1;
padding: 20px;
}
.item {
width: 100px;
height: 100px;
background-color: #9b59b6;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
上記のコードでは、justify-content:space-betweenを指定しています。指定することにより、最初と最後の要素が両端に配置され、残りの要素は均等な間隔で配置されます。
| 値 | 説明 |
|---|---|
| flex-start | 左揃えで配置（初期値） |
| flex-end | 右揃えで配置 |
| center | 中央揃えで配置 |
| space-between | 両端に配置し、残りは均等間隔 |
| space-around | 全要素を均等間隔で配置 |
| space-evenly | 全要素と両端を完全に均等間隔で配置 |
justify-contentを使用することで、ナビゲーションメニューやボタングループなど、要素を水平方向に整列させるレイアウトを簡単に実装できます。特にspace-betweenやspace-aroundは、要素間の余白を自動的に調整してくれるため、レスポンシブデザインに適しています。
align-itemsで縦方向の配置を調整する
align-itemsプロパティは、Flexアイテムの縦方向（交差軸方向）の配置を指定するプロパティです。要素の高さが異なる場合でも、上揃え、下揃え、中央揃えなどの配置を簡単に実現できます。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
align-items: center;
height: 200px;
background-color: #ecf0f1;
padding: 20px;
}
.item {
width: 100px;
background-color: #f39c12;
}
.item:nth-child(1) { height: 50px; }
.item:nth-child(2) { height: 100px; }
.item:nth-child(3) { height: 80px; }
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
上記のコードでは、align-items:centerを指定しています。これにより、高さの異なる3つの要素が縦方向の中央に揃えられます。
| 値 | 説明 |
|---|---|
| stretch | 親要素の高さに合わせて伸ばす（初期値） |
| flex-start | 上揃えで配置 |
| flex-end | 下揃えで配置 |
| center | 中央揃えで配置 |
| baseline | テキストのベースラインで揃える |
align-itemsはヘッダーやフッターのレイアウトで、ロゴとメニューを縦方向に中央揃えにする場合などに活用されます。また、stretchを使用すると、カード型のコンテンツの高さを自動的に揃えることができ、統一感のあるデザインを実現できます。
gapで要素間の余白を指定する
gapプロパティは、Flexアイテム間の余白を一括で指定するプロパティです。従来はmarginで個別に余白を設定していましたが、gapを使用することでシンプルなコードで余白を管理できます。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
background-color: #ecf0f1;
padding: 20px;
}
.item {
width: 100px;
height: 100px;
background-color: #1abc9c;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
上記のコードでは、gap:20pxを指定しており、要素間に20pxの余白が自動的に設定されます。gapプロパティは、行方向と列方向の余白を別々に指定することも可能です。
gapプロパティを使用すると、最初の要素の前や最後の要素の後に不要な余白が生じなくなります。従来のmarginでは、最初や最後の要素に対して余白をリセットする必要がありましたが、gapではその手間が不要です。複数行のレイアウトでも、行間と列間の余白を統一的に管理できるため、メンテナンス性の高いコードを書けます。
※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
ITやプログラミングに関するコラム
Photoshopで文字入れする方法と入力テキストの編集方法
写真を切り抜いてコラージュを作る方法とおすすめアプリ・ツールを紹介
Yahoo APIの使い方やデータの取得方法を簡単に解説
【Xcode】シミュレーター(Simulator)の起動方法とエラー対処法を解説
Photoshopの無料筆ブラシをダウンロードする方法やおすすめを紹介
KeynoteとPowerPointの違いや変換方法などから徹底比較
php.iniファイルはどこにある？OS別に設定ファイルの場所を確認する方法
イラレ(Illustrator)の遠近グリッドの使い方を簡単に解説
HTMLで"が文字化けする原因と解決方法を解説
Vimのコマンドの使い方や基本的な操作方法を解説
ITやプログラミングに関するニュース
株式会社ジェイフィールがクボタ社事例セミナーを開催、対話を通じたエンゲージメント向上策を紹介
株式会社スーツが法務向けウェビナーを開催、プロジェクト管理による生産性向上を解説
株式会社NintがEC事業者向けセミナーを開催、年商10億円のブランディング戦略を解説
株式会社M&Aナビがウェビナー開催、吸血型M&Aの手口とリスクを徹底解説
フォアスカウト・テクノロジーズがウェビナー開催、管理外デバイスのリスクと可視化による防御策を解説
株式会社Scene Liveがウェビナー開催、データが導くコールマネジメントを解説
FOOD STYLE Kyushu実行委員会が無料セミナーを開催、生成AI活用術やブランド構築法を解説
アライドアーキテクツ株式会社が春節対策ウェビナーを開催、REDとKOC活用戦略を解説
株式会社セミナーインフォが金融犯罪対策セミナーを開催、特殊詐欺の最新手口と対策を解説
APPLE TREEが無料ウェビナー開催、Markforged製品の導入事例を解説
