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

Restrict the duplication of div elements with JQuery

Adjust the size of a map on an HTML page after it has

When I try to open my modal in Electron by clicking on the button, it doesn't work

When the width of the element is set to 100vw, it disrupts the

Using blending modes with gradient colors in an SVG design

How to Change the Appearance of Elements in an Array Using React.js

Preloading videos for optimal performance on mobile devices

Is dividing a container into equal sections possible with flexbox?

Having trouble with implementing ng-hide and ng-show functionality

Is it feasible to dynamically incorporate various versions of Bootstrap within the head tag?

Find all the child elements within a specific class using CSS

What could be causing the issue with my filter page not being able to retrieve any results from the

What is the method to incorporate spread into inner shadow within an SVG file?

Unable to generate a vertical navigation bar

I encountered an issue with my h3 element's margin not being applied properly when I attempted to add

The functionality of .bind() is malfunctioning on both Microsoft Edge and Google Chrome browsers

Looking to include an if/then statement for an item that has been generated within a div?

Issues with the local or browser display of @font-face

In JavaFX, when adjusting the transparency of a popup window, only the brightness changes while the solid color remains unchanged, effectively concealing

locate the following div using an accordion view