带有列表标签的网格列,我需要每 3 列以正确的顺序显示,并为每个额外的 HTML 列表元素启用自动宽度。
这是我的例子:
<style>
ul {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 150px;
width:auto;
}
li {
float: left;
display: inline-block;
list-style: none;
position: relative;
height: 50px;
width: 50px;
}
</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>
display: -webkit-flex;
。
我想像这样转换输出:
1 4 7 10
2 5 8 11
3 6 9 12
重要的是我让这个在 Safari 浏览器上工作到目前为止我似乎根本无法解决这个问题,我会提供任何帮助:)
测试链接:
最佳答案
Flexbox 是一种 CSS3 技术。这意味着它相对较新,一些浏览器不提供对 flex 属性的完全支持。
这是一个破败的:
IE 8 和 9 不支持 flexbox。如果您想在这些浏览器中使用 flex 属性,请不要浪费您的时间。 flexbox polyfill转了一段时间,效果不佳,不再维护。
IE 10 支持 previous version of flexbox并需要 vendor prefixes .请注意,当前规范中的某些属性在 IE10 中不受支持(例如
flex-grow
、flex-shrink
和flex-basis
).查看Flexbox 2012 Property Index .IE 11 不错,但有问题。它基于 current flexbox standard .请参阅 this page 上的已知问题 选项卡对于一些问题。另见:flex property not working in IE
有了 Chrome、Firefox 和 Edge,您无所不能。您会发现一些小错误和不一致之处,但通常可以轻松修复。您需要注意 Implied Minimum Flex Sizing ,这有时会导致大小调整和滚动条问题。
Safari 版本 9 及更高版本支持当前不带前缀的 flexbox 规范。但是,较旧的 Safari 版本需要
-webkit-
前缀。有时min-width
和max-width
会导致对齐问题,这可以通过flex
等效项解决。参见 Flex items not stacking properly in Safari
有关 flexbox 浏览器支持的完整评论,请参阅此页面: http://caniuse.com/#search=flex
要快速添加许多(但不一定全部)供应商前缀,请使用 Autoprefixer .对于 Safari,请参阅 this article对于某些前缀生成器不包含的 -webkit-
前缀。
有关常见 flex 错误及其解决方法的列表,请参阅 Flexbugs .
另外,在这个网站上,还有:
关于html - Flexbox 代码适用于除 Safari 之外的所有浏览器。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35137085/