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我不知道为什么这个额外的空间在那里请澄清并提供它的修复。 我也不确定哪种行为是正确的,一个或一个铬合金
答案 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+ */