Monthly Archives: 七月 2024

Hello World

css-display-flex各种居中对齐，强迫症的福音

2024 年 07 月 23 日 – 上午 6:33

先看页面效果

html+css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

...
    <style>
        div.main{
            margin-left: 2%; width :96%;
            .title{
                width: 100%;display: flex;justify-content: space-between;
                align-items: center;padding: 10px 0;line-height: 16px;
                span{
                    font-size: 16px;color: #333;width: 200px; text-align: left;
                }
                >div{/*右侧单号、箭头*/
                    display: inline-flex;justify-content: right;align-items: center;width: 100px;
                    span{
                        font-size: 14px;color: #999;
                    }
                    img{
                        width: 14px; height: 14px; margin-right: -2px;/*修正png图的框框*/
                    }
                }
            }
            .content{
                width: 100%;
                .order{
                    background-color: #fff;border-radius: 5px;display: flex;
                    justify-content: space-between;align-items: center; margin: 10px 0;    
                    >img{/*商品图*/
                        width: 80px;height: 80px; border: 1px solid blue;
                        border-radius: 5px; margin: 10px;
                    }
                    >div{/*商品图右侧详情*/
                        display: inline-flex;flex-direction: column;
                        justify-content: space-between;align-items: center;
                        height: 80px;margin-right: 10px;
                        >div{/*单号、时间*/
                            display: flex; font-size: 16px;line-height: 16px;
                            span{
                                display:block;font-size: 16px;
                                color: #333;width: 200px;
                                text-align: left;width: 100%;
                            }
                            >span:last-child{/*时间*/
                                font-size: 11px;color: #999;text-align: right;
                            }
                        }
                        >span{/*商品名*/
                            display:inline-block;font-size: 18px;
                            color: #333;font-weight: 900;
                            text-align: left;width: 100%;
                        }
                        >span:last-child{/*规格*/
                            font-size: 11px;color: #999;
                            line-height: 12px;margin-top: -20px;/*拉进商品名与规格*/
                        }
 
                    }
                }
            }
        }
    </style>
    <div class="main">
        <div class="title">
            <span>近期订单</span>
            <div>
                <span>查看全部订单</span>
                <img src="arrow_right_small.png">
            </div>
        </div>
        <div class="content">
            <div class="order">
                <img src="IMG_1101.JPG">
                <div>
                    <div>        
                        <span>订单号: 123456789</span>
                        <span>2024-07-23 10:01:31</span>
                    </div>
                    <span>5090系列散热格窗............</span>
                    <span>红色、水冷款</span>
                </div>
 
            </div>
...

——-
over~~
后记：
记得上小学时，某日，学校请来村里老木匠，做桌椅。木匠逐个做好各种课桌的部件：桌子腿、桌面、桌洞底板，然后一个个部件拼接起来，再在接口处敲几个木削进去，一张桌子完工。老师盯着这一切，跟我们说：看到了吧，老师傅做东西就是有谱，每个部件都刚刚好，一个人轻松组装；这要是不靠谱的小年轻木匠，三五个人辅助也也不见的能拼到一起，而且拼出来桌子可能还桌腿不平摇摇晃晃
每次写页面、css，脑子里想的都是几个人辅助一起拼桌子的画面…虽然前有firebug、后有chrome的开发工具，各种页面布局，也是要反复测试才能勉强完成设计图的目标。当然，大部分时候都不能完全实现效果图，最后就彻底改成position: absolute，各种算坐标，绝对定位~~给人感觉就是：虽然呈现在眼前的貌似是一张桌子，但后面其实是各种钉子、角铁钉住、甚至胶带粘在一起的 O(∩_∩)O哈哈~
近期写小程序，再次开始搞css，发现display:flex“弹性盒模型”真的很好用，这里记个布局范式，便于以后查阅

Tags | Permalink | Comment (0)