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

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

---

목록 태그가있는 그리드 열, 모든 추가 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 기술입니다. 이것은 상대적으로 새롭고 일부 브라우저는 플렉스 속성을 완전히 지원하지 않는다는 것을 의미합니다.

다음은 요약입니다.

• IE 8 and 9 do not support flexbox. If you're wanting to use flex properties in these browsers, don't bother wasting your time. A flexbox polyfill made the rounds for a while, but it didn't work well and is no longer maintained.

• IE 10 supports a previous version of flexbox and requires vendor prefixes. Be aware that certain properties from the current spec aren't supported in IE10 (such as flex-grow, flex-shrink and flex-basis). See the Flexbox 2012 Property Index.

• IE 11 is good, but buggy. It's based on the current flexbox standard. See the KNOWN ISSUES tab on this page for some of the problems. Also see: flex property not working in IE

• With Chrome, Firefox and Edge you're good all around. You'll find minor bugs and inconsistencies but there are usually easy fixes. You'll need to be aware of Implied Minimum Flex Sizing, which sometimes causes sizing and scrollbar problems.

• Safari versions 9 and up support the current flexbox spec without prefixes. Older Safari versions, however, require -webkit- prefixes. Sometimes min-width and max-width cause alignment problems which can be resolved with flex equivalents. See Flex items not stacking properly in Safari

For a complete review of flexbox browser support, see this page: http://caniuse.com/#search=flex

For a quick way to add many (but not necessarily all) vendor prefixes use Autoprefixer. For Safari, see this article for -webkit- prefixes that some prefix generators don't include.

For a list of common flex bugs and their workarounds see Flexbugs.

Also, on this site, there's:

• Flexbox Tag Info

---

It works for me display: -webkit-inline-box; in safari.

참고URL : https://stackoverflow.com/questions/35137085/flexbox-code-working-on-all-browsers-except-safari-why