模板:Flex/doc

這個模板用於將內部元素以Flex模型排列。

用法

{{flex
|方向=方向
|堆叠效果=堆叠效果
|内容排列方式=内容排列方式
|纵向对齐方式=纵向对齐方式
|纵向排列方式=纵向排列方式
|style=其它样式
|内容
}}

方向

可選。有效取值如下：

row 橫向排列（默認）

row-reverse 橫向排列（倒序）

column 縱向排列

column-reverse 縱向排列（倒序）

堆疊效果

可選。有效取值如下：

nowrap 禁止換行

wrap 允許換行（默認）

wrap-reverse 允許換行（倒序）

內容排列方式

可選。有效取值如下：

flex-start 從行首開始排列，第一個元素與行首對齊，後續元素與前一個對齊（默認）

flex-end 從行尾開始排列，最後一個元素與行尾對齊，其它元素與後一個對齊

center 居中排列，第一個元素與行首的距離和最後一個元素與行尾的距離相同

space-around 兩端對齊，中間和兩端用同樣距離的空白分隔

space-between 兩端對齊，中間用同樣距離的空白分隔，兩端緊貼行首和行尾

縱向對齊方式

可選。有效取值如下：

flex-start 從縱軸起點開始排列，第一個元素與起點對齊，後續元素與前一個對齊（默認）

flex-end 從縱軸終點開始排列，最後一個元素與終點對齊，其它元素與後一個對齊

center 將每個元素居中對齊

縱向排列方式

可選。有效取值如下：

flex-start 從縱軸起點開始排列，第一行與起點對齊，後續行與前一行對齊（默認）

flex-end 從縱軸終點開始排列，最後一行與終點對齊，其它行與後一行對齊

center 所有行縱向居中，第一行與縱軸起點的距離和最後一行與縱軸終點的距離相同

space-around 兩端對齊，中間和兩端用同樣距離的空白分隔

space-between 兩端對齊，中間用同樣距離的空白分隔，兩端緊貼縱軸起點和終點

其它樣式

可選。額外的CSS樣式。

內容

必填。要顯示的內容。

範例

邊框僅為輔助理解所用，在實際使用時不會出現。

方向

橫向

橫向（倒序）

縱向

縱向（倒序）

堆疊效果

（請縮小瀏覽器寬度查看）

禁止換行

允許換行

允許換行（倒序）

內容排列方式

從行首開始排列

從行尾開始排列

居中

兩端對齊，兩側有空白

兩端對齊，兩側無空白

縱向對齊方式

對齊縱軸起點

對齊縱軸終點

居中

縱向排列方式

（請縮小瀏覽器寬度查看）

從縱軸起點開始排列

從縱軸終點開始排列

居中

兩端對齊，上下有空白

兩端對齊，上下無空白

水平垂直居中

{{flex
|内容排列方式=center
|纵向排列方式=center
|style=width:300px;height:300px
|[[Image:Moegirl_Head.png|100px]]
}}