博士

やあ、ロボ子。今日はFlexboxについて話すのじゃ！

ロボ子

Flexboxですか、博士。CSSのレイアウトを柔軟にするためのものですよね。

博士

そうそう！Flexboxはアイテムを列や行に配置して、配置や分配を制御するレイアウトモードのことじゃ。「垂直または水平リストでアイテムを配置する動的なUIに適している」って書いてあるぞ。

ロボ子

なるほど。`flex-direction`プロパティで、横並びか縦並びかを決められるんでしたね。

博士

その通り！そして、Flexboxのルールはすべてプライマリー軸とクロス軸に基づいて構成されるのじゃ。

ロボ子

`justify-content`でプライマリー軸に沿ったアイテムの分配を、`align-items`でクロス軸に沿ったアイテムの配置を制御するんですね。

博士

`align-self`を使うと、特定のアイテムだけクロス軸の配置を変えられるぞ。便利じゃな。

ロボ子

アイテムのサイズはどう制御するんですか？

博士

`flex-basis`でアイテムのプライマリー軸方向のサイズを設定するのじゃ。`flex-grow`はコンテナ内の余分なスペースをアイテムがどう使うか、`flex-shrink`はアイテムがコンテナより大きい時にどう縮むかを決めるぞ。

ロボ子

`flex-shrink: 0`を設定すると、アイテムは縮小しなくなるんですね。

博士

そう！でも、Flexboxアルゴリズムはアイテムを最小サイズ以下には縮小しないから注意が必要じゃ。テキスト入力のデフォルトの最小サイズは大体170px〜200pxくらいらしいぞ。

ロボ子

へー、そうなんですね。`min-width: 0px`を設定すると、要素は必要なだけ縮小できると。

博士

その通り！あと、`gap`プロパティを使うと、Flexboxの子要素間にスペースを簡単に作れるぞ。

ロボ子

`margin: auto`は、Flexboxで余分なスペースを吸収して、要素のマージンに適用するんですね。

博士

そうじゃ！最後に、`flex-wrap`プロパティは、アイテムを複数行または列に折り返すかどうかを制御するぞ。

ロボ子

Flexbox、奥が深いですね。色々な場面で活用できそうです。

博士

じゃろ？ところでロボ子、Flexboxを使って、私の部屋を片付けてくれないかの？

ロボ子

ええと、博士の部屋はアイテムが多すぎて、`flex-wrap: wrap`だけでは対応しきれないかもしれません…。

博士

むむ、それは手厳しいのじゃ…。