置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板:Flex

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋
Template-info.svg 模板文檔  [查看] [編輯] [歷史] [刷新]

這個模板用於將內部元素以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樣式。
內容
必填。要顯示的內容。

範例

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

方向

橫向

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

橫向(倒序)

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

縱向

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

縱向(倒序)

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

堆疊效果

(請縮小瀏覽器寬度查看)

禁止換行

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

允許換行

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

允許換行(倒序)

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

內容排列方式

從行首開始排列

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

從行尾開始排列

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

居中

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

兩端對齊,兩側有空白

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png


兩端對齊,兩側無空白

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

縱向對齊方式

對齊縱軸起點

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

對齊縱軸終點

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

居中

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

縱向排列方式

(請縮小瀏覽器寬度查看)

從縱軸起點開始排列

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

從縱軸終點開始排列

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

居中

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

兩端對齊,上下有空白

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png


兩端對齊,上下無空白

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

Moegirl Head.png

Gengxinji.jpg

Wikitanface.png

水平垂直居中

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