标签

解决 Flex 元素在 Safari 中不按预期换行

Brick4.com 的时候,为了撑起列表中各个套组元素让页面更加整齐美观,设置了 min-width ,常见浏览器都是正常的,唯独在 Safari 中 Flex子元素 撑破父级框不再换行。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写。flex: 1;flex: 1 1 auto; 是相同的,其中 flex-basis 就是为 Flex子元素 设置初始长(宽)度的,可取 "%"、"px"、"em" 或任何其他长度单位的数字。所以对于 Flex子元素 就没有必要也不能使用 min-width 来做限制了,直接改成 flex: 1 1 40%; 即可。

这应该是浏览器处理方式不同,Safari 严格死板了一些,不算Bug。

<style>
ul{
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

li{
  height: 50px;
/*
  -webkit-flex: 1;
  flex: 1;
  min-width: 40%;
*/
  -webkit-flex: 1 1 40%;
  flex: 1 1 40%;
  display: block;
  background-color: #f3f3f3;
  margin: 0 3px 6px;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
2017-05-08 11:44:00
Ctrl + 回车 直接提交
游客xkace
虽然我看不懂。但是我要说,阿四你是最棒的!
2017年05月09日 回复
孙老四
回复 xkace:二哥,你不能这么盲目。
2017年05月10日 回复
游客xkace
回复 孙老四:就要盲目!
2017年05月10日 回复