Flexbox (Flexible Box Layout Module) は CSS3 から導入された柔軟なボックス型レイアウトモードです。
今まで表組だけでは難しかったレイアウトが簡単にできるようになります。
flex_container と flex_box を入れ子にすることで水平方向に並べることができ、コンテンツの幅によって折り返されます。
参考サイト
https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
https://developer.mozilla.org/ja/docs/Web/CSS/flex-basis
https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap
書式
#flex_container([配置方法][,列幅の初期値][,折り返し方法]){{{
#flex_box([幅]){{
...
}}
#flex_box([幅]){{
...
}}
#flex_box([幅]){{
...
}}
}}}
flex_container 引数（オプション）
配置方法
| 位置による配置 | |
|---|---|
| center | flex_boxを中央に寄せる |
| flex-start | flex_box,flex_containerを先頭に寄せる |
| flex-end | flex_box,flex_containerを末尾に寄せる |
| 均等配置 | |
| space-between | 各flex_boxを均等に配置し最初のflex_boxは先頭に寄せ、最後のflex_boxは末尾に寄せる |
| space-around | 各flex_boxを均等に配置し各flex_boxの両側に半分の大きさの間隔を置く |
| space-evenly | 各flex_boxを均等に配置し各flex_boxの周りに同じ大きさの間隔を置く*IE11非対応 |
| stretch | 各flex_boxを均等に配置し明示的なサイズ指定がないflex_boxは、flex_containerに合わせて引き伸ばす*IE11非対応 |
列幅の初期値
| 幅を指定する | |
|---|---|
| なにも書かない | ブラウザにおまかせで内容や flex_content によって自動的に幅が決まる |
| px | 固定幅 例:#flex_container(flex-start,300){{{... |
| % | 親のflex_containerの main size に対する% 例:#flex_container(flex-start,33%){{{... |
折り返し方法
| 折り返し方法 | |
|---|---|
| wrap | できるだけ内容の改行を維持しようとし、余裕があればボックスを横に並べ、余裕がなければボックスを折り返す。単一のボックスでもう画面幅に収まらない場合は内容テキストを折り返す |
| nowrap | 積極的に内容テキストを折り返し、それぞれのボックスに相応の幅で縮んでもらって、すべてのボックスを横並びにする |
flex_box 引数（オプション）
ご注意
外部埋め込みコンテンツ（embedプラグイン等）が正しく並ばない場合があります。
幅を指定することで改善します。
必ず、flex_containerの中にflex_boxを配置してください。
サンプル
左揃え
#flex_container(flex-start){{{...
#flex_container(flex-start){{{
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
}}}
| アイテム |
|---|
 |
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
中央揃え
#flex_container(center){{{...
#flex_container(center){{{
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
}}}
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
右揃え
#flex_container(flex-end){{{...
#flex_container(flex-end){{{
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
}}}
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
#flex_container(space-between){{{...
#flex_container(space-between){{{
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
}}}
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
両端の子要素も含め、均等に間隔をあけて配置
#flex_container(space-around){{{...
#flex_container(space-around){{{
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
#flex_box{{
|~アイテム|
|&attachref(MenuBar/m.png,nolink,100x100);|
}}
}}}
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
横幅に合わせて折り返しされます
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
| アイテム |
|---|
|
Column 1
ハワイ州
出典: フリー百科事典『ウィキペディア（Wikipedia）』
ハワイ州（英: State of Hawaii [həˈwaɪ.i]、ハワイ語: Hawaiʻi）は、太平洋に位置するハワイ諸島にあるアメリカ合衆国の州。州都はオアフ島のホノルル市である。アメリカ合衆国50州の中で最後に加盟した州である。漢字では「布哇」と書く。海域として定められたミクロネシアの北端でもある。
Column 2
ハワイ島、マウイ島、オアフ島、カウアイ島、モロカイ島、ラナイ島、ニイハウ島、カホオラウェ島の8つの島と100以上の小島からなるハワイ諸島のうち、ミッドウェー環礁を除いたすべての島が、ハワイ州に属している。北西ハワイ諸島の北西端からハワイ諸島の南東端のハワイ島まで、全長1,500マイル（2,400キロ）にわたっている。州全体が島だけで構成されるアメリカ合衆国で唯一の州である。
Column 3
アメリカ合衆国本土の南西、日本の南東、オーストラリアの北東と、太平洋の中央に位置し、地理的にも民族的にも近いポリネシアでは最も北にある列島で構成されている。その自然の多様な景観、暖かい熱帯性気候、豊富な公共の海浜と大洋に取り囲まれていること、および活火山の活動があることで、観光客、サーファー、生物学者、火山学者などに人気のある目的地になっている。日本で最も人気な海外リゾート地のひとつ。独特の文化がある他に太平洋の中心にあることで、北アメリカやアジアの影響も多く受けている。130万人を超える人口のほか、常に観光客やアメリカ軍軍事関係者が滞在している。
横幅指定
各ボックスは内容によらず指定幅を確保しようとし、その結果画面幅に収まらないボックスがあれば折り返す。ただし、単一のボックスあたりの指定幅がすでに画面幅に収まっていない場合の上限は画面幅。
#flex_container(,400){{{...
Column 1
ハワイ州
出典: フリー百科事典『ウィキペディア（Wikipedia）』
ハワイ州（英: State of Hawaii [həˈwaɪ.i]、ハワイ語: Hawaiʻi）は、太平洋に位置するハワイ諸島にあるアメリカ合衆国の州。州都はオアフ島のホノルル市である。アメリカ合衆国50州の中で最後に加盟した州である。漢字では「布哇」と書く。海域として定められたミクロネシアの北端でもある。
Column 2
ハワイ島、マウイ島、オアフ島、カウアイ島、モロカイ島、ラナイ島、ニイハウ島、カホオラウェ島の8つの島と100以上の小島からなるハワイ諸島のうち、ミッドウェー環礁を除いたすべての島が、ハワイ州に属している。北西ハワイ諸島の北西端からハワイ諸島の南東端のハワイ島まで、全長1,500マイル（2,400キロ）にわたっている。州全体が島だけで構成されるアメリカ合衆国で唯一の州である。
Column 3
アメリカ合衆国本土の南西、日本の南東、オーストラリアの北東と、太平洋の中央に位置し、地理的にも民族的にも近いポリネシアでは最も北にある列島で構成されている。その自然の多様な景観、暖かい熱帯性気候、豊富な公共の海浜と大洋に取り囲まれていること、および活火山の活動があることで、観光客、サーファー、生物学者、火山学者などに人気のある目的地になっている。日本で最も人気な海外リゾート地のひとつ。独特の文化がある他に太平洋の中心にあることで、北アメリカやアジアの影響も多く受けている。130万人を超える人口のほか、常に観光客やアメリカ軍軍事関係者が滞在している。
nowrap
積極的に内容テキストを折り返し、それぞれのボックスに相応の幅で縮んでもらって、すべてのボックスを横並びにする。
#flex_container(,,nowrap){{{...
Column 1
ハワイ州
出典: フリー百科事典『ウィキペディア（Wikipedia）』
ハワイ州（英: State of Hawaii [həˈwaɪ.i]、ハワイ語: Hawaiʻi）は、太平洋に位置するハワイ諸島にあるアメリカ合衆国の州。州都はオアフ島のホノルル市である。アメリカ合衆国50州の中で最後に加盟した州である。漢字では「布哇」と書く。海域として定められたミクロネシアの北端でもある。
Column 2
ハワイ島、マウイ島、オアフ島、カウアイ島、モロカイ島、ラナイ島、ニイハウ島、カホオラウェ島の8つの島と100以上の小島からなるハワイ諸島のうち、ミッドウェー環礁を除いたすべての島が、ハワイ州に属している。北西ハワイ諸島の北西端からハワイ諸島の南東端のハワイ島まで、全長1,500マイル（2,400キロ）にわたっている。州全体が島だけで構成されるアメリカ合衆国で唯一の州である。
Column 3
アメリカ合衆国本土の南西、日本の南東、オーストラリアの北東と、太平洋の中央に位置し、地理的にも民族的にも近いポリネシアでは最も北にある列島で構成されている。その自然の多様な景観、暖かい熱帯性気候、豊富な公共の海浜と大洋に取り囲まれていること、および活火山の活動があることで、観光客、サーファー、生物学者、火山学者などに人気のある目的地になっている。日本で最も人気な海外リゾート地のひとつ。独特の文化がある他に太平洋の中心にあることで、北アメリカやアジアの影響も多く受けている。130万人を超える人口のほか、常に観光客やアメリカ軍軍事関係者が滞在している。
w=400 nowrap
基本は指定幅を確保しようとするが、画面に収まらない場合は幅の確保をせず、内容を折り返してでも、それぞれのボックスには適度に縮んでもらって、すべてのボックスを横並びにする。ただし auto nowrap と異なり、各ボックスの縮小度合いの決定は、内容ベースではなく、指定した幅をもとに行われる。(つまりボックスごとに個別に指定しなければ均等に縮小される)
#flex_container(,400,nowrap){{{...
Column 1
ハワイ州
出典: フリー百科事典『ウィキペディア（Wikipedia）』
ハワイ州（英: State of Hawaii [həˈwaɪ.i]、ハワイ語: Hawaiʻi）は、太平洋に位置するハワイ諸島にあるアメリカ合衆国の州。州都はオアフ島のホノルル市である。アメリカ合衆国50州の中で最後に加盟した州である。漢字では「布哇」と書く。海域として定められたミクロネシアの北端でもある。
Column 2
ハワイ島、マウイ島、オアフ島、カウアイ島、モロカイ島、ラナイ島、ニイハウ島、カホオラウェ島の8つの島と100以上の小島からなるハワイ諸島のうち、ミッドウェー環礁を除いたすべての島が、ハワイ州に属している。北西ハワイ諸島の北西端からハワイ諸島の南東端のハワイ島まで、全長1,500マイル（2,400キロ）にわたっている。州全体が島だけで構成されるアメリカ合衆国で唯一の州である。
Column 3
アメリカ合衆国本土の南西、日本の南東、オーストラリアの北東と、太平洋の中央に位置し、地理的にも民族的にも近いポリネシアでは最も北にある列島で構成されている。その自然の多様な景観、暖かい熱帯性気候、豊富な公共の海浜と大洋に取り囲まれていること、および活火山の活動があることで、観光客、サーファー、生物学者、火山学者などに人気のある目的地になっている。日本で最も人気な海外リゾート地のひとつ。独特の文化がある他に太平洋の中心にあることで、北アメリカやアジアの影響も多く受けている。130万人を超える人口のほか、常に観光客やアメリカ軍軍事関係者が滞在している。
nowrap + nobr
ボックスの折返し禁止で横並びになるとき、もし nobr で改行できない領域を含んでいればそのボックスは縮小されず、その結果、より右のボックスは画面外にはみ出し、横スクロール領域となる。
#flex_container(,,nowrap){{{{...
#flex_box{{{...
#nobr{{...
Column 1
ハワイ州
出典: フリー百科事典『ウィキペディア（Wikipedia）』
ハワイ州（英: State of Hawaii [həˈwaɪ.i]、ハワイ語: Hawaiʻi）は、太平洋に位置するハワイ諸島にあるアメリカ合衆国の州。州都はオアフ島のホノルル市である。アメリカ合衆国50州の中で最後に加盟した州である。漢字では「布哇」と書く。海域として定められたミクロネシアの北端でもある。
Column 2
ハワイ島、マウイ島、オアフ島、カウアイ島、モロカイ島、ラナイ島、ニイハウ島、カホオラウェ島の8つの島と100以上の小島からなるハワイ諸島のうち、ミッドウェー環礁を除いたすべての島が、ハワイ州に属している。北西ハワイ諸島の北西端からハワイ諸島の南東端のハワイ島まで、全長1,500マイル（2,400キロ）にわたっている。州全体が島だけで構成されるアメリカ合衆国で唯一の州である。
Column 3
アメリカ合衆国本土の南西、日本の南東、オーストラリアの北東と、太平洋の中央に位置し、地理的にも民族的にも近いポリネシアでは最も北にある列島で構成されている。その自然の多様な景観、暖かい熱帯性気候、豊富な公共の海浜と大洋に取り囲まれていること、および活火山の活動があることで、観光客、サーファー、生物学者、火山学者などに人気のある目的地になっている。日本で最も人気な海外リゾート地のひとつ。独特の文化がある他に太平洋の中心にあることで、北アメリカやアジアの影響も多く受けている。130万人を超える人口のほか、常に観光客やアメリカ軍軍事関係者が滞在している。
wrap + nobr
ボックスの折返しを許容する場合でも、nobr の影響で単体のボックスの時点でもう画面に収まらない場合、領域全体が横スクロールすることになる。
#flex_container(,,wrap){{{{...
#flex_box{{{...
#nobr{{...
Column 1
ハワイ州
出典: フリー百科事典『ウィキペディア（Wikipedia）』
ハワイ州（英: State of Hawaii [həˈwaɪ.i]、ハワイ語: Hawaiʻi）は、太平洋に位置するハワイ諸島にあるアメリカ合衆国の州。州都はオアフ島のホノルル市である。アメリカ合衆国50州の中で最後に加盟した州である。漢字では「布哇」と書く。海域として定められたミクロネシアの北端でもある。
Column 2
ハワイ島、マウイ島、オアフ島、カウアイ島、モロカイ島、ラナイ島、ニイハウ島、カホオラウェ島の8つの島と100以上の小島からなるハワイ諸島のうち、ミッドウェー環礁を除いたすべての島が、ハワイ州に属している。北西ハワイ諸島の北西端からハワイ諸島の南東端のハワイ島まで、全長1,500マイル（2,400キロ）にわたっている。州全体が島だけで構成されるアメリカ合衆国で唯一の州である。
Column 3
アメリカ合衆国本土の南西、日本の南東、オーストラリアの北東と、太平洋の中央に位置し、地理的にも民族的にも近いポリネシアでは最も北にある列島で構成されている。その自然の多様な景観、暖かい熱帯性気候、豊富な公共の海浜と大洋に取り囲まれていること、および活火山の活動があることで、観光客、サーファー、生物学者、火山学者などに人気のある目的地になっている。日本で最も人気な海外リゾート地のひとつ。独特の文化がある他に太平洋の中心にあることで、北アメリカやアジアの影響も多く受けている。130万人を超える人口のほか、常に観光客やアメリカ軍軍事関係者が滞在している。
Tag: レイアウト
![[hatena]](https://cdn.wikiwiki.jp/to/w/common/image/face/hatena.gif?v=4)
test ![[star]](https://cdn.wikiwiki.jp/to/w/common/image/face/star.gif?v=4)
てすと ![[heart]](https://cdn.wikiwiki.jp/to/w/common/image/face/heart.png?v=4)