フレキシブルボックス とは
フレキシブルボックス（Flexible box）はフレックスボックス（Flexbox） ともいい、CSS3 で規定された、 アイテムを行または列に並べるための 1 次元のレイアウト方法である。 アイテムを伸ばして追加の空間を埋めたり、縮めて小さい空間に収めたりできる。
実例１ フレックスアイテムの配置方向
flex-direction プロパティの値を row に指定したときの配置である。
フレックスアイテム１
フレックスアイテム２
フレックスアイテム３
flex-direction プロパティの値を row に指定したときの配置である。
フレックスアイテム１
フレックスアイテム２
フレックスアイテム３
実例２ 推論図
数理論理学入門などで使われるフィッチスタイルの推論図を作りたいと思い、 フレックスアイテムが使えるかどうか試してみた。
\( \exists x \exists y (\mathrm{P}(x) \land \mathrm{P}(y) \land x \neq y) \)
\( \forall x \forall y (\mathrm{P}(x) \land \mathrm{P}(y) \land x \neq y \to \exists!z(\mathrm{L}(z) \land
\mathrm{E}(x, z) \land \mathrm{E}(y,z)) ) \)
\( \forall x (\mathrm{L}(x) \to \exists y (\mathrm{P}(y) \land \lnot \mathrm{E}(y, x))) \)
\( \vdots \)
\( \forall x (\mathrm{P}(x) \to \exists z \exists z' (\mathrm{L}(z) \land \mathrm{L}(z')
\land \mathrm{E}(x,z) \land \mathrm{E}(x,z') \land z \neq z')) \)
これを入れ子にできるようだ。
\( \exists x \exists y (\mathrm{P}(x) \land \mathrm{P}(y) \land x \neq y) \)
\( \forall x \forall y (\mathrm{P}(x) \land \mathrm{P}(y) \land x \neq y \to \exists!z(\mathrm{L}(z) \land
\mathrm{E}(x, z) \land \mathrm{E}(y,z)) ) \)
\( \forall x (\mathrm{L}(x) \to \exists y (\mathrm{P}(y) \land \lnot \mathrm{E}(y, x))) \)
\( \)
\( \fbox{x} \)
\( \vdots \)
\( \forall x (\mathrm{P}(x) \to \exists z \exists z' (\mathrm{L}(z) \land \mathrm{L}(z')
\land \mathrm{E}(x,z) \land \mathrm{E}(x,z') \land z \neq z')) \)
\( \forall x (\mathrm{P}(x) \to \exists z \exists z' (\mathrm{L}(z) \land \mathrm{L}(z')
\land \mathrm{E}(x,z) \land \mathrm{E}(x,z') \land z \neq z')) \)