Question

我有一个显示菜单：flex设置为它并添加了flex属性。这一切在Chrome和FireFox中运行良好，但它在Safari中打破了吗？

基本上红色菜单按钮有一个align-self：center; property on不垂直居中，'menu'这个词也没有align-self：center;属性。

我在这里做错了什么 - 我已经遵循了flexbox本身的规范，以及我能收集的内容应该是什么？我总是可以使用calc（）和top属性来解决问题，但如果可能的话，我想用flexbox来完成所有这些。

任何帮助/想法都会很棒。

codepen link：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垂直居中。

您可以制作这些普通的儿童，并使用margin: 0 5rem 0 auto;上的.mousewrapper将其与徽标及其5rem之间的#unclick--desktopmenubutton空格分开，然后添加{{ 1}} 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;
}

Flexbox与Align-Self的问题

1 个答案: