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