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

Template: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