ウェブデザインにおいて、要素を柔軟に配置し、整列させることは不可欠です。その中でもFlexboxは、シンプルで強力なツールとして注目されています。本記事では、Flexboxを活用して、簡単に横並びデザインを実現する手法を解説します。
Flexコンテナの作成
まず最初に、横並びに配置したい要素の親要素にFlexコンテナを作成します。これは、display: flex;またはdisplay: inline-flex;を使用して行います。
.container {
display: flex;
}
もしくは、
.container {
display: inline-flex;
}
Flexアイテムの追加
Flexコンテナ内の各要素（アイテム）が横に並ぶようにします。これには、flexプロパティを使用します。flex: 1;を指定すると、アイテムは利用可能なスペースを均等に分配します。
.item {
flex: 1;
}
サンプルコード
HTML
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
CSS
.container {
display: flex;
}
.item {
flex: 1;
border: 1px solid #ddd; /* 省略可：見やすさのためのボーダー */
padding: 10px; /* 省略可：見やすさのためのパディング */
}
表示結果
Item 1
Item 2
Item 3
よくある質問（FAQ）
Q. CSSでFlexboxを使ってナビゲーションバーを作るには？
A. navにdisplay: flex; align-items: center; justify-content: space-between;を設定し、左にロゴ、右にメニューリンクを配置します。メニューのulにもdisplay: flex; list-style: none;を設定します。
Q. Flexboxでカードを複数列に並べるには？
A. 親にdisplay: flex; flex-wrap: wrap;を設定し、子（カード）にwidth: calc(33.333% – gap)のような幅を設定します。CSS GridのrepeatとautoFit/autoFillを使う方が簡単な場合もあります。
Q. FlexboxとGridどちらを使えばいいですか？
A. 1次元（横or縦）のレイアウトにはFlexbox、2次元（行×列）のレイアウトにはGrid Layoutが適しています。カードグリッドやページ全体のレイアウトにはGrid、ナビゲーションやボタングループにはFlexboxが向いています。
まとめ
この手法を使えば、わずかなCSSコードで横並びのデザインを実現できます。Flexboxはその柔軟性から、ウェブデザインにおいて非常に重要なツールとなっています。さまざまな要件に対応できるだけでなく、コードもシンプルで管理しやすいため、今後のプロジェクトで積極的に活用してみてください。