https://wikiwiki.jp/sample/Flexbox
コンテンツを横にならべるやつ。
みほん
| box1 |
| box2 |
| box3 |
書式
#flex_container(flex-start){{{ #flex_box{{ |CENTER:150|c |box1| }} #flex_box{{ |CENTER:150|c |box2| }} #flex_box{{ |CENTER:150|c |box3| }} }}}
flex_container 引数
配置方法
| #flex_container(flex-start) | |||||||||
| 左揃え | |||||||||
| #flex_container(center) | |||||||||
| 中央揃え | |||||||||
| #flex_container(flex-end) | |||||||||
| 右揃え | |||||||||
| #flex_container(space-between) | ||||||
| 最初と最後を両端に配置し、残りは均等に間隔をあけて配置 | ||||||
| #flex_container(space-around) | ||||||||
| 両端も含め、均等に間隔をあけて配置 | ||||||||
列幅の初期値
並べるボックスのサイズを固定しちゃう
| 幅を指定する | |
|---|---|
| なにも書かない | ブラウザにおまかせで内容や flex_content によって自動的に幅が決まる |
| px | 固定幅 例:#flex_container(flex-start,300){{{... |
| % | 親のflex_containerの main size に対する% 例:#flex_container(flex-start,33%){{{... |
みほん
| 300 |
| 300 |
書式
#flex_container(flex-start,200){{{ #flex_box{{ |300|c |300|h }} #flex_box{{ |300|c |300|h }} }}}
| 幅300のテーブル |
を#flex_container(flex-start,200)に入れると、
| 幅200のテーブル |
になると思いきや
| 幅180のテーブル |
になりました…
折り返し方法
並べるボックスが画面より長い場合に改行させるか、改行せずにスクロールバーを出すか
- wrap
- nowrap
flex_box 引数
幅
個別指定ができる
| 幅を指定する | |
|---|---|
| なにも書かない | ブラウザにおまかせで内容や flex_content によって自動的に幅が決まる |
| px | 固定幅 例:#flex_box(300){{... |
| % | 親のflex_containerの main size に対する% 例:#flex_box(33%){{... |