模板:Flex
跳至導覽
跳至搜尋
模板文檔這個模板用於將內部元素以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樣式。
- 內容
- 必填。要顯示的內容。
範例
邊框僅為輔助理解所用，在實際使用時不會出現。
方向
橫向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
水平垂直居中
{{flex
|内容排列方式=center
|纵向排列方式=center
|style=width:300px;height:300px
|[[Image:Moegirl_Head.png|100px]]
}}
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||