解决 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