Old webkit browser that do not support flex-wrap

Question

My current html works fine with bootstrap 4 wrapping and creating a two column layout. Problem is with older browsers that do not support bootstrap or flex and use an older version of webkit.

What is the alternative or equivalent to flex-wrap: wrap; and -webkit-flex-wrap: wrap; for old webkit browsers like Safari 5 on Windows or Midori on Windows/Linux?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row box-container">
  <div class="col-6">
    <div class="row">
      <div class="col-6">Item 1</div>
      <div class="col-6">Item 2</div>
      <div class="col-6">Item 3</div>
      <div class="col-6">Item 4</div>
      <div class="col-6">Item 5</div>
      <div class="col-6">Item 6</div>
    </div>
  </div>
</div>

This gives me an output of two columns... standard bootstrap

item 1   item 2
item 3   item 4

Non-bootstrap browsers like Midori or older versions of Safari using webkit outputs the following...

item 1   item 2    item 3    item 3

Answer 1

How to get the desired layout in Safari 5

Safari 5's implementation of flexbox does not support wrapping so your only option is to use flexbox for the browsers that support it and gracefully fallback to another method in older browsers.

Approach 1

One way you can do this is by adding float: left; to .col-6 (this will get ignored by browsers using flex) and reverting .row to display: block;; you can then use @supports (display: flex) to set browsers that support flexbox back to using it.

.row {
  display: block;
}

.col-6 {
  float: left;
}

@supports (display: flex) {
  .row {
    display: flex;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row box-container">
  <div class="col-6">
    <div class="row">
      <div class="col-6">Item 1</div>
      <div class="col-6">Item 2</div>
      <div class="col-6">Item 3</div>
      <div class="col-6">Item 4</div>
      <div class="col-6">Item 5</div>
      <div class="col-6">Item 6</div>
    </div>
  </div>
</div>

JS Fiddle example (click on "Result")

Approach 2

If you are just interested in handling old versions of Safari, you could use a CSS hack that only those particular versions of Safari understand to target them:

::i-block-chrome,
.row {
  display: block;
}

::i-block-chrome,
.col-6 {
  float: left;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row box-container">
  <div class="col-6">
    <div class="row">
      <div class="col-6">Item 1</div>
      <div class="col-6">Item 2</div>
      <div class="col-6">Item 3</div>
      <div class="col-6">Item 4</div>
      <div class="col-6">Item 5</div>
      <div class="col-6">Item 6</div>
    </div>
  </div>
</div>

JS Fiddle example (click on "Result")

That said...

I wouldn't spend too much time looking to fix problems in obsolete browsers as you are likely to expend a lot of effort for very little gain. Graceful degradation is nice but if you endeavour to support every browser under the sun you'll be fixing issues that very few people (or no-one!) will actually be seeing.

Answer 2

If you only need a 2 column layout and to support browsers that don't support flex box, you could do away with flex box and just use:

display: inline-block;
width: 50%; // note: ensure you have no whitespace between elements in html

or

float: left;
width: 50%;

Answer 3

hi i have check for the older version of browsers you are mention in your question this code display content as you required.

.row {
  display: box;
  display: -webkit-box;
  -webkit-box-lines: multiple;
  display: run-in;
}
.col-6 {
  -webkit-box-flex: 0.0;
  -webkit-box-flex-group: 2;
  -webkit-box-lines: single;
  float: left;
}

but the problem is that it will affect on the latest version of all browser. and in a blog i also read that Safari 5 for windows or Midori windows/linux are not support the new syntax of flexbox it support the older syntax. Blog Link: https://caniuse.com/#feat=flexbox.

Answer 4

Technically speaking, the equivalent of flex-wrap:wrap; or -webkit-flex-wrap:wrap in Safari 5 should be -webkit-box-lines:multiple going by the then current 2009 flex-box specs. However, this doesn't work not based on my tests and other reliable sources (caniuse.com).

The best way to replicate the flex-wrap behaviour consistently across as many browsers as possible is to use the display:inline-block css rule on every sibling of the flexible container. There will be no major difference between the flex-box version and the inline-block version except for a 1em space that is automatically added between each and every element in the inline-block version.

/*Asthetic code starts*/
html{
  font-family:sans-serif;
}
div div{
  margin:2.5px;
  padding:5px;
  background:#f2f2f2;
}
/*Asthetic code ends*/
/*Actual code*/
.container-1{
  display:flex;
}
.container-2 div{
  display:inline-block;
}

<h3>Flex-box example</h3>
<div class="container-1">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
</div>
<h3>Same thing implemented using <code>inline-block</code></h3>
<div class="container-2">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
</div>