的Flex箱問題 - 移動和桌面

Question

右邊的水平線重合桌面和移動Safari中的文本。
如何避免重疊？

http://codepen.io/simply-simpy/pen/EyENLr

h2 { 
 
    align-items: center; 
 
    display: flex; 
 
    font-size: 3.125vw; 
 
    margin-top: 0; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
h2:after { 
 
    border-top: 1px solid #000; 
 
    content: ""; 
 
    display: block; 
 
    margin-left: 1.875vw; 
 
    width: 100%; 
 
} 
 

 
h2:before { 
 
    border-top: 1px solid #000; 
 
    content: ""; 
 
    display: block; 
 
    margin-right: 1.875vw; 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    align-items: center; 
 
    align-content: center; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="container"> 
 
    <h2>precision</h2> 
 
</div>

Answer 1

使用您h2:before和h2:after的flex-grow: 1;代替width: 100%;將解決這個問題。

h2 { 
 
    align-items: center; 
 
    display: flex; 
 
    font-size: 3.125vw; 
 
    margin-top: 0; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
h2:after { 
 
    border-top: 1px solid #000; 
 
    content: ""; 
 
    display: block; 
 
    margin-left: 1.875vw; 
 
    flex-grow: 1;   /* <--- Replace */ 
 
} 
 

 
h2:before { 
 
    border-top: 1px solid #000; 
 
    content: ""; 
 
    display: block; 
 
    margin-right: 1.875vw; 
 
    flex-grow: 1;   /* <--- Replace */ 
 
} 
 

 
.container { 
 
    align-items: center; 
 
    align-content: center; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="container"> 
 
    <h2>precision</h2> 
 
</div>