flex_container/実験3

どうなればいいのか

以下のようにBox配置が画面幅によらず折り返されず、かつ各Box内もnobrを使うことなく任意のレイアウトにしたい。
(このページではテーブルとincludeを駆使して強引に表現してる。)
実際はPC表示でこれほど横長に使わないかもしれないが、基本PCで1024pxや1150px程度使ってレイアウト配置や折り返しの見栄えがよいように組んでる。
これをスマホなどの横が狭い表示体で見たとき、PC表示と同じレイアウト配置や折り返しで表示したい。

つまり現在は各表示体の幅を優先してその幅の中に納まるようにレイアウト配置や折り返しを崩して表示するようになっている。
これは幅を狭めて表示したときに、あたかも幅を規定してる右端にある透明な壁がコンテンツを押しつぶしてなんとか幅に収めようとしてる状況。
ここで意図してるのは逆で意図したレイアウト配置や折り返しを優先して、幅に収まらないときは画面の外に逃がしてもらいたい。
つまり右端の透明な壁を無くしてもらえればよい。
意味合い的にはflexではなく、レイアウトをfixしたい。

具体案

例えば
上記つっかえ棒のように、折り返し幅を確保するような機能があればよい。
flex_containerにこだわらず、幅広な表とかも含めてコンテンツの表示幅を部分的に定義する機能。

幅指定

• 指定値がwikiのサイト基本幅以上の場合は、最大その幅まで横スクロールバーで拡張する。
• 未指定の場合は、表などのコンテンツが求める幅に応じで横スクロールバーで自動拡張する。
• ついでにつけられるなら
  • 指定値がwikiのサイト基本幅未満の場合は、その幅で折り返すように透明な壁を作る。
    つまり右側は明示的な余白領域になり、予めスマホなどの表示幅の狭い画面に合わせてコンテンツ幅を制限した作りになる。
  • 左の開始位置を指定できるようにして、部分領域をインデントできるようにする。
    例えば現在リスト、fold、引用などインデントする機能があるが、これらの位置基準が揃ってなくイマイチに思える。
    例ページ→字下げ?
    従来字下げをコントロールできる機能がなかったが、この機能により任意に指定できるようになる。

例

#領域確保機能(左端,右端){{{
・flex_container{[Box1,Boxx2,～}}
・テーブルとか
・文章とかインライン要素
}}}