Flexbox

Flexbox（フレキシブル・ボックス・レイアウト）機能

Flexboxは、CSS3から導入された手法であり、レスポンシブな多段レイアウトや、コンテンツの配置（中央寄せ、均等配置など）を柔軟に行うために使われます。
📝 WIKIWIKIのFlexboxルール
WIKIWIKIのFlexbox機能は、コンテナとアイテムという2つの主要なマクロを入れ子にすることで実現。
1. 親要素：コンテナ (#flex_container)
Flexboxの動作を決定する親の箱（コンテナ）。

配置方法（justify-content）の例

* flex-start: 左揃え
* center: 中央揃え
* flex-end: 右揃え
* space-between: 両端寄せ（アイテム間に均等なスペース）
* space-around: アイテムの左右に均等なスペース（全体が均等配置）

2. 子要素：アイテム (#flex_box)
実際に横に並ぶ個々のコンテンツの箱（アイテム）

結論として、#flex_box は「配置のためのボックス（箱）」です。

1. #flex_box はボックス（箱）か？
   はい、#flex_box はWIKIWIKIの内部でHTMLのブロック要素（<div>）として生成されるため、物理的には「箱」です。
2. #flex_box の役割（配置が主目的）
   しかし、#flex_box の核心的な役割は、配置と幅の制御にあります。
   1. 役割: 親である #flex_container の指示に従って、水平方向に並んだり、均等にスペースを取ったり、折り返したりするアイテムとしての役割を持ちます。
   2. 違い: #cssbox が「背景色や枠線を付ける」ことを目的とした装飾ボックスであるのに対し、#flex_box は「中央寄せや横並びを可能にする」ことを目的としたレイアウトボックスです。
      したがって、#flex_box は「装飾用の箱」というよりも、「柔軟な配置を可能にするためのアイテム構造」と理解するのが最も正確です。

3. 折り返し制御（flex-wrap）
画面幅に収まらないアイテムをどのように処理するかを決定します。

💡 nobr マクロとの連携 (高度なレイアウト)
Flexboxと以前学習した #nobr マクロを組み合わせることで、非常に複雑なレスポンシブ制御が可能になります。

* 目的: アイテム（#flex_box）の中のコンテンツ（文字列など）が、絶対に縮んだり改行されたりしないように保護すること。

📌 制御の原理

* #flex_container(,,nowrap) で折り返しを禁止。
* #flex_box の中に #nobr{{...}} を記述。
* その結果、#flex_box は #nobr が保護する領域の幅以下に縮むことができなくなり、画面外にアイテムがはみ出し、横スクロールが発生します。

これは、**「このコンテンツだけは絶対にフルサイズで見せたい」**という場合に使う、高度な技法です。
📄 サンプルコード（中央揃え）
Flexboxの基本的な使い方として、コンテンツを中央揃えで配置するコードを示します。

#flex_container(center){{{
#flex_box{{
&color(blue){Column 1};
ハワイ州の概要...
}}
#flex_box{{
&color(darkgreen){Column 2};
島の構成...
}}
#flex_box{{
&color(red){Column 3};
地理と観光...
}}
}}}

配置方法、折り返し、幅の指定に関する詳細なオプション。
📝 Flexboxの詳細ルールと応用
Flexbox機能は、コンテナ (#flex_container) とその中のアイテム (#flex_box) の2つのマクロを使って、レスポンシブな多段組レイアウトを実現します。
1. 配置方法（コンテナの引数1）
アイテムを水平方向にどのように並べるかを指定します。

2. 幅の指定（コンテナの引数2 / アイテムの引数1）
幅の指定は、px (ピクセル固定幅) または % (親要素に対する割合) で行います。

* コンテナでの指定: #flex_container(,400){{{...}}} のように指定すると、すべての #flex_box の初期幅を400pxに設定します。
* アイテムでの指定: #flex_box(33%){{...}} のように、個々のアイテムの幅を細かく調整できます。

3. 折り返し方法（コンテナの引数3）
画面幅が狭くなったときの挙動を制御します。

4. 🚫 nowrap と #nobr の組み合わせ (高度な制御)
このリファレンスの最も高度な部分は、以前学習した改行抑制マクロ (#nobr) との組み合わせです。

* nowrap + #nobr:
  * nowrap は「ボックス全体を縮小してでも横に並べろ」という命令。
  * #nobr は「このボックス内のコンテンツは絶対に改行・縮小するな」という命令。
  * 結果: #nobr が適用されたボックスは縮小できなくなるため、すべてのボックスを横並びにしようとすると、画面に収まらない分は横スクロール領域になります。

📄 サンプルコード（均等配置の応用）
アイテムの両端も含めて均等に間隔をあける space-evenly を使ったサンプルです。