Flex box テンプレ

Last-modified: 2021-06-18 (金) 06:15:36

Usage:

#flex_container([配置方法[,列幅の初期値[,折返し方式]]]){{{
...
}}}

例:

#flex_container{{{
#flex_box(200){{
１列目
}}
#flex_box(200){{
２列目
}}
}}}

例:

#flex_container(space-between, 33%){{{
#flex_box{{
１列目
}}
#flex_box{{
２列目
}}
}}}

例:

#flex_container(,300,nowrap){{{
#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%){{{...