When I add
display: flex;
To my container div, autoprefixer (I'm using Grunt with "grunt-autoprefixer": "^3.0.3") adds:
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
The problem is, my layout breaks in Safari with
display: -webkit-box;
If I leave it display: -webkit-flex all is well. Any thoughts on how to disable this?
The original poster kind of answered this in their comment, but just to review, Safari (8 anyway) wants -webkit-flex, which autoprefixer isn't spitting out depending on your settings (or maybe at all, I didn't actually try tinkering with the settings). If your CSS looks like:
display:flex;
display:-webkit-flex;
it seems to fix it, as the autoprefixer output will now be:
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
Same for any other flexbox properties, so:
display:flex;
display:-webkit-flex;
flex-direction:column;
-webkit-flex-direction:column;
justify-content: center;
-webkit-justify-content:center;
Related
I'm having trouble with Safari adding a 1px margin/gap to the left on the first element in a flexbox row. I've attached an image below of the issue:
The flex box css is:
.equal-height {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
flex-direction: row;
flex-wrap: wrap;
}
The child elements are set to the following:
.child-div {
float: left;
display: block;
width: 33.3333%;
box-sizing: border-box;
}
But they I have noticed that they are computed with no float
file: style.css;
line: 1028
.row:before, .row:after{
content: " ";
display: table;
}
add:
width: 100%
and now the "margin" is solved.
The grid system you used has problems with safari: change it.
Hope I've helped you.
I've noticed this as well. Here's what worked for me:
.row:before, .row:after {
display: none;
}
The reason they are computed with no float is that flex cancels them.
As per flexbox spec:
float and clear have no effect on a flex item, and do not take it
out-of-flow. However, the float property can still affect box
generation by influencing the display property’s computed value.
So 100% width on the flex container as per Michael is ok, but if you want flexbox, what you want is:
.child-div {
width: 33.3333%;
box-sizing: border-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
i.e. You need to use either floats or flex, but not both.
You may want to have a look at this flexbox generator to understand how flex works.
I used flexbox to spread the list items in the footer navigation across the width of footer.
It is being displayed correctly in my browser and also in Chrome's mobile emulation. However it is ignored on any mobile device I've tested with (iPhone, iPad, Samsung tablet).
Does anyone see anything obvious wrong with the code I'm not aware of?
Below is the CSS/LESS snippet I'm using.
ul {
display: flex;
justify-content: space-between;
width: 100%;
padding: 0;
li {
padding: 0;
}
}
This is happening as display:flex & justify-content: space-between are not compatible in all type of browsers.So we should have a cross-browser compatible CSS like this:
ul {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 100%;
padding: 0;
li {
padding: 0;
}
}
Browser Support for display:flex
IE 11
Edge
FireFox 22+
Chrome 29+
Safari 9+
Opera 17+
Android Browser 4.4+
Browser Support for justify-content: space-between
IE 11
Edge
FireFox 20+
Chrome 52+
Safari 9+
Opera 12.1+
Android Browser 5.6+
Useful Links:
https://caniuse.com/#feat=flexbox
https://caniuse.com/#feat=mdn-css_properties_justify-content_flex_context
https://css-tricks.com/using-flexbox/
I have a strange css problem that appears to exist only in Safari.
I have rows of 5 boxes. There is no attempt to make this responsive, each box is 160px wide and they fit within a set width container of 900px.
See here: http://bit.ly/1rs97IB
In Safari only, when a box title wraps onto two lines, the whole box is pushed upwards outside of the row. This does not happen within IE, Opera, Firefox or Chrome. Can anyone work out what might be causing this and suggest an approach to fixing it? It's driving me a bit nuts...
After a lot of experimenting I came up with this: Change the display to flex for two of the containers.
.post_gallery_row {
margin-bottom: 21px;
padding-bottom: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.post_gallery_item {
width: 160px;
margin-right: 21px;
margin-left: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
I have no idea what specifically caused the error, but this is something atleast and I hope it helps.
My website is http://www.parentcenterhub.org/region6-aboutus/ This page is displaying correctly in Google Chrome. But, the layout is messed up for Internet Explorer and Firefox. I think this is CSS issue. The CSS code is
#primary { display: -webkit-box; // or display: flex; }
.entry-content img.alignleft {margin-left: 0px !important;}
.custom_list { float: right; display: inline-block;
width: 30%;
list-style-type: none; }
-webkit-box will only work in webkit browsers - which Firefox/ IE are not. You need to specify the vendor prefixes for it to work in all modern browsers.
#primary {
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
This however won't work on older versions of IE (as with everything else..). Check here http://caniuse.com/flexbox for information on what versions of browsers support this property.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What are the differences between display:box and display:flexbox
I have read a css3 flex-box demo here,the parent element's style is :
.flexbox {
display: -webkit-flexbox;
-webkit-flex-pack: center;
-webkit-flex-align: center;
width: 50%;
height: 100px;
background: orange;
}
Once I change the display: -webkit-flexbox; to display: -webkit-box;, the page layout have changed.
Buy I read some tutorial about the -webkit-flexbox and -webkit-box just is the same syntax.Is that true? Are there some differences between them?
According to this source the specs have changed:
The Working Draft has undergone changes to much of the syntax used in the flexbox model. For example:
display: box;
This will become:
display: flexbox;
Both versions of the syntax work (at least in chrome). The reason why the layout looks different if you change the display style is because you have to change -webkit-flex-pack: center; to -webkit-box-pack: center; when you use display: -webkit-box;
So this is equivalent to your css style from above and should produce the same layout:
.flexbox {
display: -webkit-box;
-webkit-flex-box: center;
-webkit-flex-box: center;
width: 50%;
height: 100px;
background: orange;
}