Flex-wrap functionality in versions of Safari 6 and earlier

As I work on developing my website, I have been using flexbox to assist with the layout. It has been functioning well on most browsers, but I have encountered issues with Safari versions below 6.1. Specifically, I am struggling with flex-wrap as I want the elements to automatically wrap horizontally. For Safari 6 and below, I am looking for something like this code snippet: 


display: flex;
-webkit-flex-flow: row wrap;

I have tried searching for a solution, but it seems like there is uncertainty about whether this feature is supported in older Safari versions. I came across a similar question on Stack Overflow (found here), but the information was not clear. My main question is: is this feature supported in Safari 6 and below? If not, is there an alternative way to achieve a similar effect?

htmlioscsssafariflexbox

Answer №1

Solution for iOS Safari Issue

It seems that using the property flex-wrap on ios safari versions below 6.1 is not supported.

Alternative Workaround

To address this issue, you can implement a small JavaScript test (or utilize Modernizr) to detect the absence of the flexwrap property:

// Check for support of flex wrap in current browser
var has_flex_wrap_support = function () {
  let d = document.documentElement.style
  return (('flexWrap' in d) || ('WebkitFlexWrap' in d) || ('msFlexWrap' in d));
}

// Add the class no-flexwrap to body based on test result
var check_for_flexwrap = function () {
  if ( ! has_flex_wrap_support() )
    document.body.classList.add('no-flexwrap');
};

check_for_flexwrap();

To achieve a similar horizontal wrapping effect, use inline-block in your CSS:

.no-flexwrap .container { display: block; }
.no-flexwrap .container__children { display: inline-block; }

Additional Resources:

For more information, refer to Almost complete guide to flexbox without flexbox.

Answer №2

In my search for an answer, the closest I could find is that it may not be supported. However, this explanation does not seem very clear to me.

Before Safari version 6.1, it used the original Flexbox specification. Back in 2009, the concept of flex-wrap did not yet exist.

Therefore, the feature is not supported in Safari.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the steps to creating an API for a web application?

I have been tasked with creating an API for my web application that will utilize another website's authentication system. While I have a basic understanding of JavaScript, PHP, and HTML, I need guidance on how to proceed with building the API. Here i ...

javascriptphphtmlapiweb-applications

Utilize the JavaScript Email Error Box on different components

On my website, I have implemented a login system using LocalStorage and would like to incorporate an error message feature for incorrect entries. Since I already have assistance for handling email errors on another page, I am interested in applying that sa ...

javascripthtmlcsslocal-storagemessage

Applying CSS to replicate the vintage iPhone app icon design

I've been searching online for days, but I can't seem to find any helpful resources on how to use CSS3 to style the old iPhone app icon. My goal is to apply a CSS3 style to this curved line, with a fallback option in case older browsers don&apos ...

htmlcsscss-shapes

bootstrap 4 - create a responsive two-column layout where the second column displays additional details specifically designed for mobile devices

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous"> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-xs-12"> ...

csshtmltwitter-bootstrapresponsive-designbootstrap-4

Adding the output of a UNIX command to a div container

I am currently working on creating a UNIX web-based terminal for educational purposes. My progress so far includes setting up a text box and displaying the output, similar to this: <?php $output = shell_exec('ls'); echo "<pre>$output< ...

phpajaxshellunixhtml

"Handling Errors in JavaScript when a Button Click Event Triggers a

There are 2 buttons intended for "Add to Favorites" and "Remove from Other Favorites". Here is the code snippet: <button type="submit" class="btn btn-warning btn-xs" id="FavoriButonex" data-id="<?php echo $sorid ?>"> <i class="fa fa-hea ...

javascriptphphtml

Is the sliding navigation glitching due to the video background?

Currently, I am in the process of developing a website with a captivating full-page video background. The nav menu gracefully slides out from the left side using jQuery UI when users scroll down to view the site's content. To view the work-in-progres ...

jqueryhtmlcssjquery-uiz-index

Issue with absolute positioning occurs when the screen resolution or window size is altered, causing the feature to

Take a look at the code snippet below: <div style="position: relative;"> <div style="position: absolute; left: 10px; top: 18px;"> <img id="ImgTachoMetre" src="/Images/u174_normal.png"> </div> </div> I have wr ...

htmlcss

Setting up a PHP email form for offline use

Here is the code I am currently working on: <?php if(isset($_POST['submit'])){ $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086d65696164486d70696578646d266b6765">[email protected]</a>"; // ...

phphtmlformsemaillocalhost

How can the height of div1 be made equal to the container and div2 without using JavaScript?

Here is the structure of the HTML: <div id="container"> <div id="blue-box"> </div> <div id="red-box"> </div> </div> The CSS styling for these elements is as follows: #container { background-color:blue; ...

htmlcss

Ajax is updating the information stored in the Data variable

Recently, I reached out to tech support for help with an issue related to Ajax not executing properly due to Access-Control-Allow-Origin problems. Fortunately, the technician was able to resolve the issue by adding a file named .htaccess with the code Head ...

javascriptjqueryhtmlajax.htaccess

Steps to obtain an Element binding from a Svelte component

Is it possible to retrieve the bounding client rect of an anchor element? I typically mark this using the syntax bind:this={someVariable}. However, when I add this code to a Svelte component, I receive a different object that Svelte uses to represent a c ...

javascripthtmlsvelte

Running the command "nexrjs create next-app" successfully generates all the necessary directories for the

After trying to install NextJS using both methods npm install next react react-dom and npx create-next-app appname, I noticed that my project directories are different from what they are supposed to look like: Instead of having pages, api(_app.js, index.j ...

javascripthtmlcssnode.jsnext.js

What is the best way to asynchronously download images while maintaining the original order?

I recently encountered an issue while trying to download multiple images from the iTunes API using asynchronous requests. I had stored the image URLs in an array, but when I downloaded the images and placed them into a new array, the order of the images be ...

iosarraysswiftasynchronousimagedownload

Step-by-step guide for implementing LoadGo animation with HTML

I'm in the process of loading my logo on my website's homepage. I found a LoadGo animation that I want to use, which can be downloaded Here Currently, the logo is set to load when a button is clicked. However, I would like it to load automatical ...

jqueryhtmlcss

Disregard specific exceptions while utilizing the All Exceptions breakpoint in Xcode

My Xcode setup includes an All Exceptions breakpoint: Occasionally, Xcode will pause on a line like: [managedObjectContext save:&error]; accompanied by the following backtrace: However, if you click Continue, the program carries on as though noth ...

iphoneiosxcode

I can't seem to figure out why this isn't functioning properly

Upon examining the script, you'll notice the interval() function at the very bottom. The issue arises from bc-(AEfficiency*100)/5; monz+((AEfficiency*100)/5)((AFluencyAProduct)/100); For some reason, "bc" and "monz" remain unchanged. Why is that so? T ...

javascripthtmlcssintervals

How can I make my Grid items in React and Material-UI occupy the entire horizontal space without wrapping to the next row?

I am currently utilizing Material-UI within a React 16.10 project. My goal is to create a table where the left column consists of an icon, while the right column displays a label and address stacked on top of each other. I want the items in the right colum ...

cssreactjsgridmaterial-uiwidth

Tips for choosing a specific set of list items using HTML

In my application, I have a list that is divided into sections like "currently viewing as," "recently viewed," and "staff." All elements in the list share the same classes, making it difficult to identify a specific list element in a particular section, su ...

javahtmlselenium-webdrivertestnghtml-lists

When the react autocomplete dropdown appears, it pushes other input elements downward, affecting their

Having implemented an autocomplete dropdown feature by following this link, I am encountering an issue with displaying the dropdown items. As shown in the reference link, the dropdown items are rendered within a div tag with the position set to relative. ...

javascripthtmlcssreactjsautocomplete