css代码实现列表等宽

实现上面的手机页面，我们会遇到一个自适应的问题，但是手机页面的屏幕大小不一致，自适应的问题不是百分比可以好好解决的，我采用下面的布局：display:flex;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>list</title>
 6 </head>
 7 <style>
 8     .contBorder{
 9         margin-left:15px;
10         border-left: 3px solid #666;
11     }
12     .listCon{
13         
14     }
15     .listCon>li{
16         position: relative;
17         display: flex;
18         margin-top: 10px;
19     }
20     .listCon>li:before{
21         content:'';
22         position: absolute;
23         width: 20px;
24         height:20px;
25         border-radius: 10px;
26         background-color:#efef;
27         left:-52px;
28         top:15px;
29     }
30     .clear{clear:both;}
31     .listSeft{
32         background-color:#da4453;
33         color:#fff;
34         flex:1;
35     }
36 </style>
37 <body>
38     <div class="contBorder">
39         <ul class="listCon">
40             <li>
41                 <div class="listSeft">
42                     <p>20-78-90-76</p>
43                 </div>
44             </li>
45             <li>
46                 <div class="listSeft">
47                     <p>20-78-90-76</p>
48                 </div>
49             </li>
50             <li>
51                 <div class="listSeft">
52                     <p>20-78-90-76</p>
53                 </div>
54             </li>
55             <li>
56                 <div class="listSeft">
57                     <p>20-78-90-76</p>
58                 </div>
59             </li>
60         </ul>
61     </div>
62 </body>
63 </html>

给li标签的属性增加：display：flex；给article标签加属性：flex：1；

就可以实现横条忽略内容宽度，保持所有横条的宽度一致。