Vue.js-Day08【项目实战(附带 完整项目源码)-day03：订单确认页面、美团支付页面、flex弹性盒子布局】

Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】

实战项目源码【链接：https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA   提取码：n6ol】

目   录

1、订单确认页面

2、支付页面

3、flex弹性盒子布局

---

1、订单确认页面

2、支付页面

3、flex弹性盒子布局

学 习 网 址 ：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

    
    
    
    



    

        我是盒子1!【非 弹性布局！】
        
我是one！
        
我是two！
        
我是three！
    

    



    

        我是盒子2!【弹性布局！】
        
我是one！
        
我是two！
        
我是three！
    

    



    

        我是盒子3!【row（默认值）：主轴为水平方向，起点在左端。】
        
我是one！
        
我是two！
        
我是three！
    

    



    

        我是盒子4!【row-reverse：主轴为水平方向，起点在右端。】
        
我是one！
        
我是two！
        
我是three！
    

    



    

        我是盒子5!【column：主轴为垂直方向，起点在上沿。】
        
我是one！
        
我是two！
        
我是three！
    

    



    

        我是盒子6!【column-reverse：主轴为垂直方向，起点在下沿。】
        
我是one！
        
我是two！
        
我是three！
    

    



    

        我是盒子7!【（1）nowrap（默认）：不换行。】
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
    

    



    

        我是盒子8!【（2）wrap：换行，第一行在上方。】
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
    

    



    

        我是盒子9!【（3）wrap-reverse：换行，第一行在下方。】
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
        
我是one！
        
我是two！
        
我是three！
    

    


    
    



    

        我是盒子10!【（1）flex-flow属性：flex-direction】
        
我是one！
        
我是two！
        
我是three！
    

    



    

        我是盒子11!【（2）flex-flow属性：flex-wrap】
        
我是one！
        
我是two！
        
我是three！
    


    



    

        我是盒子12!【（1）flex-start（默认值）：左对齐】
        
我是one！
        
我是two！
        
我是three！
    

    



    

        我是盒子13!【（2）flex-end：右对齐】
        
我是one！
        
我是two！
        
我是three！
    

    



    

        我是盒子14!【（3）center： 居中】
        
我是one！
        
我是two！
        
我是three！
    

    



    

        我是盒子15!【（4）space-between：两端对齐，项目之间的间隔都相等。】
        
我是one！
        
我是two！
        
我是three！
    

    



    

        我是盒子16!【（5）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。】
        
我是one！
        
我是two！
        
我是three！
    

多谢观看！！！