带有列表标签的网格列,我需要每3列以正确的顺序显示,并 for each 额外的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>
This is what I have tried so far and works absolutely fine on every other browser but not compatible with Safari browser unless I add this: display: -webkit-flex;.

我想像这样转换输出:

1 4 7 10
2 5 8 11
3 6 9 12

很重要的一点是,到目前为止,我无法解决这个问题,我需要任何帮助:)

测试链接:

http://jsfiddle.net/rafcastro77/3zd7yspg/59/

推荐答案

Flexbox是一种CSS3技术.这意味着它相对较新,一些浏览器并不完全支持Flex属性.

Here's a run-down:

有关Flexbox浏览器支持的完整回顾,请参阅此页面: http://caniuse.com/#search=flex

要快速添加许多(但不一定全部)供应商前缀,请使用Autoprefixer.有关Safari,请参阅this article以了解一些前缀生成器不包含的-webkit-个前缀.

有关常见flex错误及其解决方法的列表,请参见Flexbugs.

另外,在这个网站上,有:

Css相关问答推荐

material 设计--Bootstrap输入域问题

如何使用Bootstrap在切换按钮旁边的手风琴标题中添加链接?

如何使用 Ant Design 为不同的屏幕尺寸制作自定义组件样式

如何在Safari中隐藏CSS的offset-path属性?CSS支持规则不按预期工作

有没有办法在 CSS 字体速记中使用数字字体粗细?

为什么我的 CSS 转换在 React 18 中不起作用

带有 flex 的 CSS 空 div 以扩展并保持纵横比

Mat table - 保留第一列和复选框

css ::part 伪 Select 器 Chrome 兼容性?

Bootstrap 类似乎没有任何作用

基于变量动态生成 CSS 类 - SCSS

如何保持包装的弹性项目与前一行元素的宽度相同?

在响应式设计中指定 HTML 文本中的首选换行点

位置元素垂直固定,绝对水平

内联