[html] Safari를 제외한 모든 브라우저에서 작동하는 Flexbox 코드. 왜?

Program / 글쓴이

목록 태그가있는 그리드 열, 모든 추가 HTML 목록 요소에 대해 자동 너비가 활성화 된 상태에서 3 개의 열마다 올바른 순서로 표시해야합니다.

이것은 내 예입니다.

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

스 니펫 확장

이것은 내가 지금까지 시도한 것이며 다른 모든 브라우저에서 절대적으로 잘 작동하지만 이것을 추가하지 않으면 Safari 브라우저와 호환되지 않습니다 display: -webkit-flex;.

다음과 같이 출력을 변환하고 싶습니다.

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

지금까지 Safari 브라우저에서이 작업을 수행하는 것이 중요합니다.이 문제를 전혀 해결할 수없는 것 같습니다. 어떤 도움도 필요합니다. 🙂

테스트 링크 :

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

답변

Flexbox는 CSS3 기술입니다. 이것은 상대적으로 새롭고 일부 브라우저는 플렉스 속성을 완전히 지원하지 않는다는 것을 의미합니다.

다음은 요약입니다.

Flexbox 브라우저 지원에 대한 전체 검토는 다음 페이지를 참조하십시오.
http://caniuse.com/#search=flex

많은 (반드시 전부는 아님) 공급 업체 접두사를 빠르게 추가하려면 Autoprefixer를 사용 하십시오 . Safari의 경우 일부 접두사 생성기에 포함되지 않는 접두사에 대해서는 이 문서 를 참조하십시오 -webkit-.

일반적인 플렉스 버그 목록과 그 해결 방법은 Flexbugs를 참조하십시오 .

또한이 사이트에는 다음이 있습니다.

답변

그것은 나를 위해 작동 합니다 : -webkit-inline-box; 사파리에서.

답변