Align-Self 的 Flexbox 问题 [重复]

Question

我有一个带有 display: flex 设置并添加了 flex 属性的菜单。在 Chrome 和 FireFox 中一切正常，但在 Safari 中就坏了？

基本上是带有 align-self: center 的红色菜单按钮；属性 on 不会垂直居中，同样具有 align-self: center 的单词“menu”也不会居中；属性。

我在这里做错了吗 - 我已经遵循了 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>

Answer 1

您正在使用position: absolute，它不会在 Safari 中使用 flexbox 垂直居中。

您可以制作那些普通的 flex 子项，并在 .mousewrapper 上使用 margin: 0 5rem 0 auto; 将其与徽标分开，并在其与 #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">
	<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>