模板: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样式。
- 内容
- 必填。要显示的内容。
范例
边框仅为辅助理解所用，在实际使用时不会出现。
方向
横向
横向（倒序）
纵向
纵向（倒序）
堆叠效果
（请缩小浏览器宽度查看）
禁止换行
允许换行
允许换行（倒序）
内容排列方式
从行首开始排列
从行尾开始排列
居中
两端对齐，两侧有空白
两端对齐，两侧无空白
纵向对齐方式
对齐纵轴起点
对齐纵轴终点
居中
纵向排列方式
（请缩小浏览器宽度查看）
从纵轴起点开始排列
从纵轴终点开始排列
居中
两端对齐，上下有空白
两端对齐，上下无空白
水平垂直居中
{{flex
|内容排列方式=center
|纵向排列方式=center
|style=width:300px;height:300px
|[[Image:Moegirl_Head.png|100px]]
}}
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||