Question

我尝试在safari中使用flex - 但在使用时有问题 flex 0 0 20％与其他flex容器在同一行 - safari总是向我显示5个元素但没有wrap /

<style>
html {
  width: 800px;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}
.brand {
  display: flex;
  width: 100%;
}
.brand-info {
  flex: 1;
}
.brand-list {
  flex:2;
  max-width: 100%;
}
.brand-list-items {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}

.brand-list-items img {
  flex: 0 0 20%;
}

</style>

   <div class="brand">
  <div class="brand-info">
    base info 
  </div>
    <div class="brand-list">
      <div class="brand-list-items">
         <img src="https://placehold.it/300" alt="">
         <img src="https://placehold.it/300" alt="">        
         <img src="https://placehold.it/300" alt="">        
         <img src="https://placehold.it/300" alt="">        
         <img src="https://placehold.it/300" alt="">        
      </div>
    </div>
</div>

https://jsfiddle.net/betasap/r3hm86zq/

Answer 1

这是safari中的一个错误，虽然已在最新版本中修复旧版本更改为。

.brand-list-items img { flex: 0 0 10em; }

如何在野生动物园中使用flex？

1 个答案: