dispaly:flex自适应布局实现两边横线，中间文字

昨天记录了一下自适应布局，现在记录下它的一个简单应用：实现两边横线，中间文字

代码特别简单

1 <div class="line">
2             <hr/>第三方登录<hr />
3         </div>

设置父元素DIV高度为零，行高为零，为了居中 

 1 .line {
 2             margin-top: 30px;
 3             display: flex;
 4             height: 0;
 5             line-height: 0;
 6             font-size: 14px;
 7             color: #666;
 8         }
 9         
10         div.line>hr {
11             flex: 1;
12         }

效果如下：也是自适应分辨率的

 

转载于:https://www.cnblogs.com/zou1052265451/p/6800132.html