横並びのレイアウト（flexbox）
ページデザインやレイアウトを作成する上で、横並びの方法やテクニックを理解されてない方が多いです。
現在のようなflexboxが無かった時代は、「inline」や「inline-block」を使ったり、「float」を使って横並びを実現していました。
ところが、「inline」や「inline-block」はHTMLの作成方法によっては僅かな隙間（ゴミ）が画面上に表示されてしまったり、
また「float」だと使う場所や使い方によってはデザイン崩れを起こしやすい、という欠点があり、エンジニアの間では「clearfix」を覚える事がほぼ必須でした。
【参考サイト】
→floatを解除する手法のclearfix と 次世代のレイアウトの話 | Web Design KOJIKA17
そのような事から、現在のHTML5やCSS3（HTML 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のソースコード】
|
1 2 3 4 5 |
<ul class="list"> <li><a href="#">リンク1</a></li> <li><a href="#">リンク2</a></li> <li><a href="#">リンク3</a></li> </ul> |
【cssのソースコード】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* ul要素の初期化 */ .list { list-style-type: none; margin: 0; padding: 0; text-align: center; } .list a { background-color: #ffffff; border: solid 1px #cccccc; display: block; padding: 0 10px; } |
このサンプル内の、3つのa要素を横並びするにはどの要素にflexboxを適用するかが重要です。
flexboxの作成で重要なのは親要素です。
横並びしたいa要素3つを囲ってる親要素はul要素になりますので、この要素に対し、「display: flex;」を追加します。
※flexboxの標準状態は、コンテンツの内容に合わせ、左寄せで、小さくまとまるようにレイアウトされます。
【cssのソースコード】
|
1 2 3 4 5 6 7 |
/* ul要素の初期化 */ .list { list-style-type: none; margin: 0; padding: 0; display: flex; } |
右寄せ
flexbox内の子要素を右寄せしたい時は、「justify-content: flex-end;」を追加します。
【cssのソースコード】
|
1 2 3 4 5 6 7 8 |
/* ul要素の初期化 */ .list { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; } |
センタリング
flexbox内の子要素をセンタリングしたい時は、「justify-content: center;」を追加します。
【cssのソースコード】
|
1 2 3 4 5 6 7 8 |
/* ul要素の初期化 */ .list { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; } |
子要素同士を離す
flexbox内の子要素同士を離したい場合は、「gap: npx;」を使用すると楽です。
【cssのソースコード】
|
1 2 3 4 5 6 7 8 9 |
/* ul要素の初期化 */ .list { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 10px; } |
両端揃え
flexbox内の子要素が2つしかない場合で、両端揃えをしたい時は、「justify-content: space-between;」を追加します。
【cssのソースコード】
|
1 2 3 4 5 6 7 8 |
/* ul要素の初期化 */ .list { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-between; } |
均等割り付け
flexbox内の子要素をすべて均等にしたい時は、子要素のli要素に対し、「flex: 1;」を追加します。
【cssのソースコード】
|
1 2 3 4 5 6 7 8 9 10 11 |
/* ul要素の初期化 */ .list { list-style-type: none; margin: 0; padding: 0; display: flex; } .list li { flex: 1; } |
子要素の横幅を比率で決定する
flexbox内の子要素の横幅を比率で決定したい時は、子要素のli要素に対し、「flex: n;」を使ってそれぞれの比率を設定します。
例えば、それぞれの子要素の幅を「2:5:3」の比率で設定したい時は、次のようなCSSを作成します。
※あくまでも1例でそれ以外の方法もあります。（「width」や「flex-basis」など）
【cssのソースコード】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* ul要素の初期化 */ .list { list-style-type: none; margin: 0; padding: 0; display: flex; } .list li:nth-child(1) { flex: 2; } .list li:nth-child(2) { flex: 5; } .list li:nth-child(3) { flex: 3; } |
自動折り返し（回り込み）
flexbox内の子要素が多すぎて横一列に並ばない時、次の行に折り返したい時は、「flex-wrap: wrap;」を追加しますと、自動的に次の行に折り返します。
【cssのソースコード】
|
1 2 3 4 5 6 7 8 |
/* ul要素の初期化 */ .list { list-style-type: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } |
子要素の並ぶ向き（縦に並べる）
flexbox内の子要素を右横方向に並べるのではなく、縦方向に並べる時は、「flex-direction: column;」を追加します。
高さ（height）を制限する事で勝手に右に回り込みます。
