By user3115767


2016-02-01 17:50:38 8 Comments

Grid columns with list tags, I need to display in correct order per every 3 columns, with auto width enabled for every extra HTML list elements.

This is my example:

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

I want to convert the output like this:

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

It's important I get this working for Safari browser so far I cant seem to solve this problem at all, I would appropriate any help :)

Test link:

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

2 comments

@Michael_B 2016-02-01 18:39:30

Flexbox is a CSS3 technology. This means it's relatively new and some browsers don't provide full support for flex properties.

Here's a run-down:

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

@saravana va 2017-08-28 10:53:04

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

@user1608841 2018-07-04 08:30:35

it does work; but what about other flex utilities in safari ?

Related Questions

Sponsored Content

42 Answered Questions

[SOLVED] How to vertically center a div for all browsers?

4 Answered Questions

[SOLVED] When flexbox items wrap in column mode, container does not grow its width

  • 2015-11-24 10:55:00
  • Anders Tornblad
  • 31533 View
  • 120 Score
  • 4 Answer
  • Tags:   html css css3 flexbox

11 Answered Questions

[SOLVED] Why don't self-closing script elements work?

1 Answered Questions

[SOLVED] CSS Auto Width is not Working with Flexbox

  • 2013-07-10 04:32:16
  • geeko
  • 10326 View
  • 7 Score
  • 1 Answer
  • Tags:   css layout flexbox

4 Answered Questions

1 Answered Questions

[SOLVED] CSS Grid does not work in Firefox and Safari

1 Answered Questions

[SOLVED] Flexbox display issues on mobiles, tablets & old browsers

1 Answered Questions

[SOLVED] Flexbox column wrap not working in latest Safari if children have min-width

0 Answered Questions

2 Answered Questions

[SOLVED] Flex box row wrap not working in safari. Tried multiple prefixes?

  • 2015-07-08 05:02:02
  • Femtosecond
  • 2100 View
  • 1 Score
  • 2 Answer
  • Tags:   html css flexbox

Sponsored Content