Menu
The last column of the first row is wrapped to the next line when viewing in Safari, and some other iOS based browsers.
Safari:
Chrome / Others:
Code:
.flexthis { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flexthis .col-md-4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }<div class="row flexthis"> <div class="col-md-4 col-sm-6 text-center"> <div class="product"> <img src="img.jpg" alt="" class="img-responsive"> <h3>Name</h3> <p>Description</p> </div> </div> </div>
299
Safari versions 9 and up support the current flexbox spec without prefixes. Older Safari versions, however, require -webkit- prefixes. Sometimes min-width and max-width cause alignment problems which can be resolved with flex equivalents.
Making things wrap If you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap , or use the shorthand flex-flow with values of row wrap or column wrap . Items will then wrap in the container.
Approach: To create a two-column layout, first we create a <div> element with property display: flex, it makes that a div flexbox and then add flex-direction: row, to make the layout column-wise. Then add the required div inside the above div with require width and they all will come as columns.
Using an element to break to a new flex row comes with an interesting effect: we can skip specifying the width of any item in our flex layout and rely completely on the line breaks to define the flow of our grid. This produces a layout with two vertically stacked full-width items (I've added a border to the .
Explanation
This happens because Safari treats :before and :after pseudo-elements as if they were real elements. E.g. think about a container with 7 items. If container has :before and :after Safari will position the items like this:
[:before ] [1st-item] [2nd-item] [3rd-item] [4th-item] [5th-item] [6th-item] [7th-item] [:after ] Solution
As an alternative to the accepted answer I remove :before & :after from flex containers instead of altering the HTML. In your case:
.flexthis.container:before, .flexthis.container:after, .flexthis.row:before, .flexthis.row:after { content: normal; // IE doesn't support `initial` } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
