flex_container/実験1

Last-modified: 2021-06-04 (金) 09:23:06

1

#flex_container(,500,nowrap)
半角だと折り返しが起きない
やりたいことはこれに近いが、各Box、あるいは各テーブルの幅指定は無視される。
1234567890123456789012345678901234567890123456789012345678901234567890
1234567890123456789012345678901234567890123456789012345678901234567890
1234567890123456789012345678901234567890123456789012345678901234567890

2

#flex_container(,500,nowrap)
半角だと折り返しが起きない。前記と同じ。
|100|c テーブル書式や#flex_box(100)で規定してもテーブル幅が変わらない
1234567890123456789012345678901234567890123456789012345678901234567890
1234567890123456789012345678901234567890123456789012345678901234567890
1234567890123456789012345678901234567890123456789012345678901234567890

3

#flex_container(,500,nowrap)
全角だとテーブル内で折り返しが発生して、結果的に画面幅と一致する
これだとスマホなどの狭い画面で表示したとき、押し込められて見づらい。

4

#flex_container(,500,nowrap)
#flex_box(500) 各
全角だとテーブル内で折り返しが発生して、結果的に画面幅と一致する
flex_boxで幅を規定しても上記と変わらない

5

#flex_container(,,nowrap)
#nobr、#flex_box(500)、#flex_box(500)
左だけnobr指定してみた。右側のboxは横スクロールで押し出されず、頑張って画面幅に収まろうと押しつぶされる。

6

#flex_container(,,nowrap)
#flex_box(500)、#flex_box(500)、#nobr、
右にnobrおいてみる。flex_boxはNobrにより左側の壁に押し付けられ変形する。
右側のnobrが率先して右には逃げてくれない。

7

#flex_container(,,nowrap)
#nobr{{ #flex_box(500)、#flex_box(500)、#flex_box(500) }}
全Boxをまとめてnobr。横には並ばない。