的Flex箱问题 - 移动和桌面

右边的水平线重合桌面和移动Safari中的文本。
如何避免重叠？

的Flex箱问题 - 移动和桌面

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>

来源

2016-07-20 Scott Simpson

使用您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>

来源

2016-07-20 21:04:08

这也是固定的问题与多个单词叠加：http://codepen.io/simply-simpy/pen/LkdxVG –

真棒！乐意效劳：） –

的Flex箱问题 - 移动和桌面

回答

相关问题