Flexbox - managing wrapping on legacy devices

Question

Flexbox - managing wrapping on legacy devices

Utilizing flexbox, I have successfully designed a 2 column layout with a div at the top spanning both columns for a menu format. While this works flawlessly in Chrome and iOS7, it appears to be ineffective in outdated versions of Safari. In this fiddle, you can see my implementation: http://jsfiddle.net/Jtts9/

I do not require support for Internet Explorer, but it must work on Android and iOS devices. Although it displays correctly in Chrome and iOS7, I encounter issues when using the old syntax (such as display: -webkit-box;) because replicating the two columns becomes challenging without flex-flow: row wrap which is absent in the older syntax. References to box-lines have been found, yet it seems like they are not supported.

Is there a way to achieve the same appearance utilizing the older 2009 flexbox syntax?

html css flexbox

Answer 1

Answer №1

After struggling with the old flexbox syntax, I decided to switch to using float and pseudo-selectors.

You can see the solution in action in this fiddle, which compares it to the original problem.

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

To achieve this, I applied float: left to all items and then used the following CSS code:

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

This code floats every second element to the right.

Furthermore, to mimic the behavior of flexbox when dealing with an odd number of items, I added the following rule:

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

This ensures that the final box spans the complete width if there is an odd number of boxes present.

Answer 2

After struggling with the old flexbox syntax, I decided to switch to using float and pseudo-selectors.

You can see the solution in action in this fiddle, which compares it to the original problem.

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

To achieve this, I applied float: left to all items and then used the following CSS code:

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

This code floats every second element to the right.

Furthermore, to mimic the behavior of flexbox when dealing with an odd number of items, I added the following rule:

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

This ensures that the final box spans the complete width if there is an odd number of boxes present.

Flexbox - managing wrapping on legacy devices

Answer №1

Similar questions

Motion of the atoms

A guide on utilizing ClassName to insert new items into a DIV

Can the height of one div be determined by the height of another div?

Disabling the final grid cell(s)

Leveraging the Scroll feature in Bootstrap for smooth scrolling

Modifications to the toolbar styling are made by the Angular Material mat-form-field

I wish to simply click on a browser link without the need to open a new tab

Can we combine JQuery includes with Angular Includes?

What steps are necessary to alter the background color of a jumbotron?

Proper syntax for jQuery's insertAfter() method when using selectors

The autocomplete attribute for "current-password" in React is failing to display the form fill option

Ways to conceal the picture

Interact with the :before pseudo element when hovering over an element

Creating a vertical triangle pointing to the right as the border of a div element

Is it possible to add a tooltip to a div without using any JavaScript or JQuery?

Is there a way to horizontally align my navigation bar links with CSS while maintaining grey borders on the sides?

What causes the element to remain visible despite the changes made to the v-show attribute?

I am curious as to why the "default + label" pseudo-class is not functioning properly on the "input" element. Specifically, I am having trouble with the "+ label" portion

How can one set relative paths for links when including a file from a different directory that contains links?

Efficiently repositioning Kendo Mobile Buttongroup to a new row as needed