列换行的 Safari 问题答案

【问题标题】：Safari issue with column wrap列换行的 Safari 问题
【发布时间】：2017-11-24 10:48:09
【问题描述】：

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 中，safari 中有一个额外的空间。我不确定为什么会有这个额外的空间，请澄清并提供修复。我也不确定哪种行为是正确的，是 safari 还是 chrome 的

【问题讨论】：

标签： html css safari flexbox

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用供应商前缀

.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;
}

【讨论】：