【CSS】Flexboxを使って簡単に横並びデザインを実現する方法

ウェブデザインにおいて、要素を柔軟に配置し、整列させることは不可欠です。その中でも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;         /* 省略可：見やすさのためのパディング */
}

表示結果

まとめ

この手法を使えば、わずかなCSSコードで横並びのデザインを実現できます。Flexboxはその柔軟性から、ウェブデザインにおいて非常に重要なツールとなっています。さまざまな要件に対応できるだけでなく、コードもシンプルで管理しやすいため、今後のプロジェクトで積極的に活用してみてください。