使用列换行的Safari问题

时间:2017-06-21 13:33:08

标签: html css css3 safari flexbox

HTML:

<div class = "main-container">
  <div class = "item-1">
    <div class = "simple_list1">
      <div class = "header_left">
        <div class = "it-1">Predictive analysis</div>
        <div class = "it-2">Cool idea</div>
      </div>
    </div>
    <div class = "simple_list2">Current Analysis</div>
  </div>
  <div class = "item-2">Java</div>
</div>

CSS:

.main-container{
  display:flex;
  flex-flow:row wrap;
  width:350px;
  height:46px;
  border:1px solid red;
}
.main-container > .item-1{
  display:flex;
  width:auto;
  flex-flow:column wrap;
  border:1px solid blue;

}

.main-container > .item-2{
  display:flex;
  width:auto;
  margin-left:auto!important;
  border:1px solid green;
}
.header_left{
  display:flex;
  width:auto;
  flex-flow:row wrap;
  border:2px solid red;
}

在safari和chrome中打开此页面。在chrome中,flex子项被紧紧包裹(列包裹) 但是在野生动物园里有一个额外的空间在safari.i我不知道为什么这个额外的空间在那里请澄清并提供它的修复。 我也不确定哪种行为是正确的,一个或一个铬合金

2 个答案:

答案 0 :(得分:0)

使用供应商前缀

.main-container > .item-2{
  display:flex;
  display:-webkit-flex;
  width:auto;
  margin-left:auto!important;
  border:1px solid green;
}
.header_left{
  display:-webkit-flex;
  width:auto;
  -webkit-flex-flow:row wrap;
  border:2px solid red;
}

答案 1 :(得分:-1)

display: -webkit-flex;                        /* Safari */
         -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */