CODEWITHSUNDEEP
htmlcssflexbox
Digital-Clouds
Digital-Clouds

Reputation: 552

Flexbox - flex-wrap on older devices

I've used flexbox to create a 2 column layout with a div at the top spanning both columns (I'm using this for a menu layout). The following fiddle shows how I've achieved this. Unfortunately, while it works perfectly in Chrome/iOS 7, it doesn't seem to work in older versions of Safari. http://jsfiddle.net/Jtts9/

I don't need to support IE, but does need to support Android/iOS. This displays correctly in Chrome and iOS7, but when I use the old syntax (e.g. display: -webkit-box;), I can't replicate the two columns, as flex-flow: row wrap doesn't seem to exist in the older syntax. I've seen a few references to box-lines, but it sounds like this was not supported.

How would I go about achieving the same look while using the old 2009 flexbox syntax?

Upvotes: 1

Views: 2060

Answers (1)

Digital-Clouds
Digital-Clouds

Reputation: 552

I gave up on the old flexbox syntax in the end, and went with float and pseudo-selectors.

This fiddle shows the solution, compared to the original problem.

http://jsfiddle.net/HQPKM/7/

What I've done is apply float: left to all the items, and then used the following:

.item2 :nth-child(2){
    float: right;
}

to float every second element to the right.

Additionally, to replicate the behaviour of flexbox when an odd number of items were present, I added the following rule:

.item2:last-child:not(:nth-child(odd)){
    width: calc(100% - 2px);
}

This makes the final box span the complete width if there are an odd number of boxes.

Upvotes: 2

Related Questions