對齊自我的Flexbox問題

我有一個顯示菜單：flex設置爲它並添加了flex屬性。它在Chrome和FireFox中都能正常工作，但它在Safari中打破了？對齊自我的Flexbox問題

基本上是紅色的菜單按鈕，它有一個align-self：center;屬性不是垂直居中，「菜單」這個詞也沒有對齊自己：居中;屬性。

我在這裏做錯了什麼 - 我遵循flexbox本身的規範，從我可以收集我所做的工作應該如何？我總是可以使用calc（）和top屬性來解決這個問題，但是如果可能的話，我想用flexbox來完成。

任何幫助/想法都會很棒。

codepen鏈接：https://codepen.io/emilychews/pen/owqQxw

CSS

* {font-family: arial; } 
h1{padding: 0; color: white;} 

.logo--holder { 
position: relative; 
left: 0; 
z-index: 99; 
left: 1rem; 
} 

.unclick--header { 
display: -webkit-box; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-align: center; 
    -ms-flex-align: center; 
     align-items: center; 
position: absolute; 
width: 60%; 
height: 5.16rem; 
background: blue; 
top: calc(82.5vh - 6.19rem); 
left: 0; 
right: 0; 
z-index: 99; 
margin-left: auto; 
margin-right: auto; 
max-width: 1180px; 
} 

/*mouse svg*/ 
.mousewrapper { 
position: absolute; 
right: calc(116px + 5rem); 
top: 16px; 
} 

#mouse-body { 
stroke: white !important; 
stroke-width: 1px !important; 
} 

circle#mouse-topcircle, #mouse-triangle { 
fill: white; 
fill-opacity: 0.7; 
} 


/*red button in desktop header*/ 
#unclick--desktopmenubutton { 
display: -webkit-box; 
display: -ms-flexbox; 
display: flex; /*this is needed for align-self property on the word 'menu' further down*/ 
background: red; 
height: 50px; 
width: 116px; 
position: absolute; 
right: 1rem; 
} 

/*MENU BARS*/ 
.bar { 
position: absolute; 
width: 30px; 
background-color: white; 
left: 65%; 
height: 2px; 
} 

.bar1 {position: absolute; top: 15px;} 
.bar2 {position: absolute; top: 25px;} 
.bar3 {position: absolute; bottom: 14px;} 

.unclick--desktopmenu-word { 
-ms-flex-item-align: center; 
    align-self: center; 
position: absolute; 
left: 10px; 
letter-spacing: 1px; 
color: white; 
}

HTML

<div class="unclick--header"> 
    <div class="logo--holder"><h1>Logo</h1></div> 
    <div class="mousewrapper"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="50" viewBox="0 0 30 57.1"><title>mouse - final</title><path id="mouse-body" d="M31 45.1L31 45.1c0 0.1 0 0.1 0 0.2 0 6-6.7 10.8-15 10.8S1 51.3 1 45.3c0-0.1 0-0.1 0-0.2l0 0V11.8l0 0C1 5.8 7.7 1 16 1s15 4.8 15 10.8l0 0V45.1z" style="fill:none;stroke-linejoin:round;stroke-width:2;stroke:#000"/><circle id="mouse-topcircle" cx="16" cy="10.9" r="2.8"/><path id="mouse-triangle" d="M16.9 47.2l2.9-5c0.4-0.7-0.1-1.5-0.9-1.5h-5.7c-0.8 0-1.3 0.8-0.9 1.5l2.9 5C15.5 47.9 16.5 47.9 16.9 47.2z"/></svg> 
    </div> 
    <div id="unclick--desktopmenubutton"> 
    <div class="unclick--desktopmenu-word">Menu</div> 
    <div class="bar bar1"></div> 
    <div class="bar bar2"></div> 
    <div class="bar bar3"></div> 
    </div> 
</div>

來源

2017-07-02 The Chewy

您使用position: absolute垂直使用Flexbox的Safari瀏覽器中，將不會居中。

你可以使那些正常彎曲的孩子，並使用margin: 0 5rem 0 auto;上.mousewrapper將其從標誌，它和#unclick--desktopmenubutton之間5rem空格分隔，再加入margin-right: 1em;到#unclick--desktopmenubutton，將其從母公司中分離出來。

* { 
 
    font-family: arial; 
 
} 
 
h1 { 
 
    padding: 0; 
 
    color: white; 
 
} 
 

 
.logo--holder { 
 
    position: relative; 
 
    left: 0; 
 
    z-index: 99; 
 
    left: 1rem; 
 
} 
 

 
.unclick--header { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    position: absolute; 
 
    width: 60%; 
 
    height: 5.16rem; 
 
    background: blue; 
 
    top: calc(82.5vh - 6.19rem); 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 99; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: 1180px; 
 
} 
 

 
/*mouse svg*/ 
 
.mousewrapper { 
 
    margin: 0 5rem 0 auto; 
 
} 
 

 
#mouse-body { 
 
    stroke: white !important; 
 
    stroke-width: 1px !important; 
 
} 
 

 
circle#mouse-topcircle, #mouse-triangle { 
 
    fill: white; 
 
    fill-opacity: 0.7; 
 
} 
 

 
/*red button in desktop header*/ 
 
#unclick--desktopmenubutton { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; /*this is needed for align-self property on the word 'menu' further down*/ 
 
    background: red; 
 
    height: 50px; 
 
    width: 116px; 
 
    margin-right: 1em; 
 
    position: relative; 
 
    align-items: center; 
 
} 
 

 
/*MENU BARS*/ 
 
.bar { 
 
    position: absolute; 
 
    width: 30px; 
 
    background-color: white; 
 
    left: 65%; 
 
    height: 2px; 
 
} 
 

 
.bar1 { 
 
    position: absolute; 
 
    top: 15px; 
 
} 
 
.bar2 { 
 
    position: absolute; 
 
    top: 25px; 
 
} 
 
.bar3 { 
 
    position: absolute; 
 
    bottom: 14px; 
 
} 
 

 
.unclick--desktopmenu-word { 
 
    margin-left: 10px; 
 
    letter-spacing: 1px; 
 
    color: white; 
 
}

<div class="unclick--header"> 
 
\t <div class="logo--holder"><h1>Logo</h1></div> 
 
\t <div class="mousewrapper"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="50" viewBox="0 0 30 57.1"><title>mouse - final</title><path id="mouse-body" d="M31 45.1L31 45.1c0 0.1 0 0.1 0 0.2 0 6-6.7 10.8-15 10.8S1 51.3 1 45.3c0-0.1 0-0.1 0-0.2l0 0V11.8l0 0C1 5.8 7.7 1 16 1s15 4.8 15 10.8l0 0V45.1z" style="fill:none;stroke-linejoin:round;stroke-width:2;stroke:#000"/><circle id="mouse-topcircle" cx="16" cy="10.9" r="2.8"/><path id="mouse-triangle" d="M16.9 47.2l2.9-5c0.4-0.7-0.1-1.5-0.9-1.5h-5.7c-0.8 0-1.3 0.8-0.9 1.5l2.9 5C15.5 47.9 16.5 47.9 16.9 47.2z"/></svg> 
 
    </div> 
 
    <div id="unclick--desktopmenubutton"> 
 
    <div class="unclick--desktopmenu-word">Menu</div> 
 
    <div class="bar bar1"></div> 
 
    <div class="bar bar2"></div> 
 
    <div class="bar bar3"></div> 
 
    </div> 
 
</div>

來源

2017-07-02 22:13:47

對齊自我的Flexbox問題

回答

相關問題