Step 步骤
使用方法
ax-step表示进行步骤，一般用于步骤、流程、事件等流程性页面。包含了水平进行和纵向进行。
通过使用不同的样式可创建不同风格的进行步骤，样式说明如下：
ax-step步骤外边ax-style-dot小点指示ax-style-circle圆圈指示，可使用数字和图标ax-style-img图片指示，可使用图片或图标ax-ends-none首位没尾巴，纵向无效ax-ends-scatter左右两侧分布，纵向无效ax-vertical纵向进行步骤ax-reverse步骤反转，水平进行步骤无效
默认使用方法如下：
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
1天前
确认订单
追加用户留言
30分钟前
付款
微信支付￥5000
进行中
发货
还未发货，请稍后
<div class="ax-step">
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">发货</div>
<div class="ax-des">还未发货，请稍后</div>
</div>
</div>
</div>
简化
步骤中的ax-head，ax-des都可以省略掉，实现简化效果。
提交订单
确认订单
付款
发货
<div class="ax-step">
<div class="ax-item">
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
</div>
</div>
<div class="ax-item">
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
</div>
</div>
<div class="ax-item ax-active">
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
</div>
</div>
<div class="ax-item">
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">发货</div>
</div>
</div>
</div>
掐头去尾
通过使用ax-ends-none和ax-ends-scatter样式实现两种掐头去尾的效果。
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
1天前
确认订单
追加用户留言
30分钟前
付款
微信支付￥5000
进行中
发货
还未发货，请稍后
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
1天前
确认订单
追加用户留言
30分钟前
付款
微信支付￥5000
进行中
发货
还未发货，请稍后
<div class="ax-step ax-ends-none">
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">发货</div>
<div class="ax-des">还未发货，请稍后</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-ends-scatter">
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">发货</div>
<div class="ax-des">还未发货，请稍后</div>
</div>
</div>
</div>
多种风格
默认风格是小圆圈，通过使用ax-style-dot、ax-style-cirle和ax-style-img分别实现小圆点、数字/图标和图片风格。
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
1天前
确认订单
追加用户留言
30分钟前
付款
微信支付￥5000
进行中
发货
还未发货，请稍后
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
1天前
确认订单
追加用户留言
30分钟前
付款
微信支付￥5000
进行中
发货
还未发货，请稍后
2019年4月12日
1
提交订单
戴尔笔记本电脑1台，￥5000
1天前
2
确认订单
追加用户留言
30分钟前
3
付款
微信支付￥5000
19天前
1
这里是标题
这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
进行中
3
确认订单
还未确认订单
2019年4月12日
1
提交订单
戴尔笔记本电脑1台，￥5000
1天前
确认订单
追加用户留言
进行中
3
付款
还未付款
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
进行中
确认订单
还未确认订单
进行中
付款
还未付款
<div class="ax-step">
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">发货</div>
<div class="ax-des">还未发货，请稍后</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-style-dot">
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">发货</div>
<div class="ax-des">还未发货，请稍后</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-style-circle">
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>1</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>2</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>3</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-style-circle">
<div class="ax-item">
<span class="ax-head">19天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>1</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">这里是标题</div>
<div class="ax-des">这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-check"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>3</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">还未确认订单</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-style-img">
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>1</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-check"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>3</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">还未付款</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-ends-scatter ax-style-img">
<div class="ax-item ax-active">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-download"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-check"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">还未确认订单</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-edit"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">还未付款</div>
</div>
</div>
</div>
纵向排列
通过使用ax-vertical创建纵向进行步骤，常用语历史记录。默认从上至下排列，也即先完成的排前面。
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
1天前
确认订单
追加用户留言
30分钟前
付款
微信支付￥5000
进行中
发货
还未发货，请稍后
<div class="ax-step ax-vertical">
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">发货</div>
<div class="ax-des">还未发货，请稍后</div>
</div>
</div>
</div>
纵向风格
默认风格是小圆圈，通过使用ax-style-dot、ax-style-cirle和ax-style-img分别实现小圆点、数字/图标和图片风格。
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
1天前
确认订单
追加用户留言
30分钟前
付款
微信支付￥5000
进行中
发货
还未发货，请稍后
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
1天前
确认订单
追加用户留言
30分钟前
付款
微信支付￥5000
进行中
发货
还未发货，请稍后
2019年4月12日
1
提交订单
戴尔笔记本电脑1台，￥5000
1天前
2
确认订单
追加用户留言
30分钟前
3
付款
微信支付￥5000
19天前
1
这里是标题
这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
进行中
3
确认订单
还未确认订单
2019年4月12日
1
提交订单
戴尔笔记本电脑1台，￥5000
1天前
确认订单
追加用户留言
进行中
3
付款
还未付款
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
进行中
确认订单
还未确认订单
进行中
付款
还未付款
<div class="ax-step ax-vertical">
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">发货</div>
<div class="ax-des">还未发货，请稍后</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-style-dot ax-vertical">
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">发货</div>
<div class="ax-des">还未发货，请稍后</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-style-circle ax-vertical">
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>1</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>2</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>3</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-style-circle ax-vertical">
<div class="ax-item">
<span class="ax-head">19天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>1</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">这里是标题</div>
<div class="ax-des">这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-check"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>3</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">还未确认订单</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-style-img ax-vertical">
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>1</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-check"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>3</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">还未付款</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-style-img ax-vertical">
<div class="ax-item ax-active">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-download"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-check"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">还未确认订单</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-edit"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">还未付款</div>
</div>
</div>
</div>
纵向反转排列
通过使用ax-vertical ax-reverse创建纵向反转排列，未完成的排前面。注意反转排列只对纵向有效。
进行中
发货
还未发货，请稍后
30分钟前
付款
微信支付￥5000
1天前
确认订单
追加用户留言
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
<div class="ax-step ax-reverse ax-vertical">
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">发货</div>
<div class="ax-des">还未发货，请稍后</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
</div>
纵向反转风格
默认风格是小圆圈，通过使用ax-style-dot、ax-style-cirle和ax-style-img分别实现小圆点、数字/图标和图片风格。
进行中
发货
还未发货，请稍后
30分钟前
付款
微信支付￥5000
1天前
确认订单
追加用户留言
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
进行中
发货
还未发货，请稍后
30分钟前
付款
微信支付￥5000
1天前
确认订单
追加用户留言
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
30分钟前
3
付款
微信支付￥5000
1天前
2
确认订单
追加用户留言
2019年4月12日
1
提交订单
戴尔笔记本电脑1台，￥5000
进行中
3
确认订单
还未确认订单
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
19天前
1
这里是标题
这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍
进行中
3
付款
还未付款
1天前
确认订单
追加用户留言
2019年4月12日
1
提交订单
戴尔笔记本电脑1台，￥5000
进行中
付款
还未付款
进行中
确认订单
还未确认订单
2019年4月12日
提交订单
戴尔笔记本电脑1台，￥5000
<div class="ax-step ax-reverse ax-vertical">
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">发货</div>
<div class="ax-des">还未发货，请稍后</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-reverse ax-style-dot ax-vertical">
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">发货</div>
<div class="ax-des">还未发货，请稍后</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-reverse ax-style-circle ax-vertical">
<div class="ax-item ax-active">
<span class="ax-head">30分钟前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>3</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">微信支付￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>2</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>1</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-reverse ax-style-circle ax-vertical">
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>3</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">还未确认订单</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-check"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">19天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>1</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">这里是标题</div>
<div class="ax-des">这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-reverse ax-style-img ax-vertical">
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>3</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">还未付款</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">1天前</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-check"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">追加用户留言</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i>1</i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
</div>
<div class="ax-break-xl"></div><div class="ax-break-xl"></div>
<div class="ax-step ax-reverse ax-style-img ax-vertical">
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-edit"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">付款</div>
<div class="ax-des">还未付款</div>
</div>
</div>
<div class="ax-item">
<span class="ax-head">进行中</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-check"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">确认订单</div>
<div class="ax-des">还未确认订单</div>
</div>
</div>
<div class="ax-item ax-active">
<span class="ax-head">2019年4月12日</span>
<div class="ax-mark">
<div></div>
<span class="ax-node"><i class="ax-iconfont ax-icon-download"></i></span>
<div></div>
</div>
<div class="ax-text">
<div class="ax-title">提交订单</div>
<div class="ax-des">戴尔笔记本电脑1台，￥5000</div>
</div>
</div>
</div>
IE11对弹性布局的方向不支持，所以纵向的“步骤”在IE11中无法使用。