css - Align-Self 的 Flexbox 问题

Question

<分区>

Answer 1

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

你可以创建那些普通的 flex 子节点，然后使用 margin: 0 5rem 0 auto;在 .mousewrapper将其与 Logo 和 5rem 分开它和 #unclick--desktopmenubutton 之间的空间, 然后添加 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>