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