横並びのレイアウト(flexbox)

ページデザインやレイアウトを作成する上で、横並びの方法やテクニックを理解されてない方が多いです。

現在のようなflexboxが無かった時代は、「inline」や「inline-block」を使ったり、「float」を使って横並びを実現していました。
ところが、「inline」や「inline-block」はHTMLの作成方法によっては僅かな隙間(ゴミ)が画面上に表示されてしまったり、
また「float」だと使う場所や使い方によってはデザイン崩れを起こしやすい、という欠点があり、エンジニアの間では「clearfix」を覚える事がほぼ必須でした。
【参考サイト】
floatを解除する手法のclearfix と 次世代のレイアウトの話 | Web Design KOJIKA17

そのような事から、現在のHTML5やCSS3HTML Living Standard)では、様々なレイアウトに対応し、デザインが崩れ難く、おまけにコントロールもしやすい「flexbox」を使うのが一般的です。

flexboxには様々なレイアウトや組み合わせがあり、すべてを解説するのは無理です。
そこで、実践的によく使われそうなものに絞ってご紹介します。
【参考サイト】
【CSS】まだfloat使ってる?CSSのFlexboxを徹底解説! – WEBDESIGNDAY
日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
もう迷わない!CSS Flexboxの使い方を徹底解説 | Web Design Trends

flexboxについて

flexbox」とは様々なレイアウトを「display: flex;」を使う事で実現するテクニックです。
まずはul、li、a要素を使って簡単なサンプルを作ってみましょう。
※a要素には見やすくする為、一部余分なCSSも入れてます。

【htmlのソースコード】

【cssのソースコード】

【表示サンプル】

このサンプル内の、3つのa要素を横並びするにはどの要素にflexboxを適用するかが重要です。
flexboxの作成で重要なのは親要素です。
横並びしたいa要素3つを囲ってる親要素はul要素になりますので、この要素に対し、「display: flex;」を追加します。
※flexboxの標準状態は、コンテンツの内容に合わせ、左寄せで、小さくまとまるようにレイアウトされます。

【cssのソースコード】

【表示サンプル】

右寄せ

flexbox内の子要素を右寄せしたい時は、「justify-content: flex-end;」を追加します。

【cssのソースコード】

【表示サンプル】

センタリング

flexbox内の子要素をセンタリングしたい時は、「justify-content: center;」を追加します。

【cssのソースコード】

【表示サンプル】

子要素同士を離す

flexbox内の子要素同士を離したい場合は、「gap: npx;」を使用すると楽です。

【cssのソースコード】

【表示サンプル】

両端揃え

flexbox内の子要素が2つしかない場合で、両端揃えをしたい時は、「justify-content: space-between;」を追加します。

【cssのソースコード】

【表示サンプル】

均等割り付け

flexbox内の子要素をすべて均等にしたい時は、子要素のli要素に対し、「flex: 1;」を追加します。

【cssのソースコード】

【表示サンプル】

子要素の横幅を比率で決定する

flexbox内の子要素の横幅を比率で決定したい時は、子要素のli要素に対し、「flex: n;」を使ってそれぞれの比率を設定します。
例えば、それぞれの子要素の幅を「2:5:3」の比率で設定したい時は、次のようなCSSを作成します。
※あくまでも1例でそれ以外の方法もあります。

【cssのソースコード】

【表示サンプル】

自動折り返し(回り込み)

flexbox内の子要素が多すぎて横一列に並ばない時、次の行に折り返したい時は、「flex-wrap: wrap;」を追加しますと、自動的に次の行に折り返します。

【cssのソースコード】

子要素の並ぶ向き(並べる方向)

flexbox内の子要素を右横方向に並べるのではなく、下方向に並べる時は、「flex-direction: column;」を追加します。
高さ(height)を制限する事で勝手に右に回り込みます。

【cssのソースコード】

前の記事

リセットCSSについて