I'm trying to set up a layout for my site using flexbox (inb4: I don't care about IE) but for some reason the items aren't wrapping.
http://jsfiddle.net/EnUuA/
section { display:-webkit-flex; -webkit-flex-flow: row wrap; width: 200px; /* ... */ }
div { -webkit-flex: 1; width:48%; /* ... */ }
I've tried setting a width in px and I've tried removing the width completely.. still doesn't wrap!
So, how can I get my flexboxes to wrap around in their container?
Please, before you answer, make sure that your answer actually uses the flexible box model and isn't just giving me block level elements.
It seems that (as of today) the flex-flow property is one that isn't in on Firefox (at least the CR 2012 version).
You can see the wrapping in this fiddle working in Opera/Chrome, however.
Safari Nightly also has it functioning http://nightly.webkit.org
[edit] stupid Compass forgot the prefixes
References:
https://developer.mozilla.org/en-US/docs/CSS/flex
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes
NB as of FF 21.0a1 it does not support flex-wrap
At least you can validate the property works:
http://jsfiddle.net/M7yLn/1/
Related
The webpage is http://www.parentcenterhub.org/region6-aboutus/ It is displaying correctly on all browsers except IE9. The CSS is:
#primary { display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; }
The conditional css for ie 7 and ie 8 is:
.ie8 .content-area1{
width: 70%;
display: inline-block; }
.ie7 .content-area1{
width: 70%;
display: inline-block; }
There is no conditional css file for IE9. So, please suggest the code which I can put in style.css so that the page also displays correctly for IE9. Please help.
IE9 and doesn't support flexbox (see here for full browser support details), so you'll need to use something like your IE7/8 alternative layout for IE9.
You can work without having a conditional CSS for IE9 in one of several ways:
Use CSS's override mechanisms. Simply specify display:inline-block above display:flex (etc) inside the same selector, and every browser will pick the last defined option that they support. So if flex is below inline-block, IE9 will use inline-block because it doesn't understand flex, and others will use flex because they do know it and it's below inline-block. Sure, this doesn't deal with setting the width, but we've got half the problem solved without any browser-specific code at all (in fact, this would work for IE7/8 too, so you can reduce your specific code for them as well). width might be solvable with a similar trick by specifying a default value using a measurement unit not support in older browsers like rem or vmin or something, and then overridding it with % for the older browsers, but whether that would work for you would depend on your actual layout.
Use a library such as Modernizr, which will add feature support flags that you can use in the form of class names on your <body> tag. For example, it will add a flexbox class for browsers that support it, and a no-flexblox class for those that don't. This means you can write CSS code that targets browsers that support the feature or not -- eg:
.flexbox #primary {
display:flex; //etc...
}
.no-flexbox #primary {
display:inline-block;
width:70%;
}
Use a browser hack. I really don't like suggesting this, but it is an option. There are CSS hacks that specifically target IE9 if you really want to use them. I won't repeat them here though as I don't think it's the best option. If you want to use them, Google will tell you what you need to know.
Use an IE9-specific class just as you are currently for IE7 and IE8. You're doing it already, so it doesn't seem like it should be too much of a stretch.
Just use inline-block across the board. If the inline-block layout works, why not just use that. Flexbox is great, but if you need IE7/8/9 support, you're not going to be able to use it consistently, so....?
Personally, I'd go with the Modernizr solution. It solves this problem very neatly, and can also deal with most other cases where you might consider having browser-specific styles due to missing features.
I am using the Pure Grids of PureCSS. I have a pure-g with three pure-u-1-3, containing a few paragraphs. The problem is that there is a difference in display between Chrome/IE and Firefox when one of the units is longer than the others.
http://jsfiddle.net/f3YNe/3/
http://i.stack.imgur.com/VFVYu.png
I have tried to use jQuery to calculate the highest pure-u-1-3 and setting the rest to this height. But it didn't work out as expected, since this grid has to be responsive as well (using pure-g-r)
Does anybody know how to make Firefox produce the same output?
As purecss has fixed the problem (v0.6) by implementing it in every browser, this answer is obsolete.
Previous answer:
Your problem is that PureCSS is using -ms-display: flex in Internet Explorer and -webkit-display: flex in Webkit Browsers. Opera, Firefox and (obviously) older IEs don't get this solution.
To get it working in Firefox (20+) and Opera you could apply the following in your stylesheet:
.pure-g-r {
display: flex;
}
Further information: http://css-tricks.com/using-flexbox/
Here a example using your fiddle: http://jsfiddle.net/f3YNe/12/
This has been fixed and accepted as a fix as part of pure's v0.6.0 milestone.
The fix can be seen on Github here: https://github.com/yahoo/pure/pull/351/files.
If you're using pure prior to 0.6.0 coming out adding
.pure-g-r {
display: flex;
flex-flow: row wrap;
}
to your css should make things play nice in your layout.
I am trying to migrate a design to the new flexbox spec (display: -webkit-flex; instead of display: webkit-box;). Although the overflow: auto; property seems to be being ignored unless I set an explicit height on the container being overflowed.
Working Examples:
Implementation with old spec
Implementation with new spec
Am I doing something wrong, or is this new spec not fully finished yet?
Half a year later: I struggled with similar issue and have to say it's more likely a bug.
Unfortunately, neither current version of Chrome 25 nor Safari 6.0.2 does handle this case yet.
Although, if you check out the newest Chrome 27 canary version you can see that it's seems to be fixed there.
The only one code change which I had to apply to your example was to remove height: 100%; property on bottom containers and add some sort of hack which is min-height: 0; set for main bottom container (which by the way for some reason can be also replaced with height: 0; property).
CodePen fork
Imagine I'm having a DIV. I want to display it in a row with other divs, so I'm giving it display: inline-block along with other style definitions in a CSS sheet.
Now Internet Explorer wants to have display: inline; for the behavior I want.
How do I give Internet Explorer a seperate styling command to overwrite the definition for good browsers, so only IE will have display: inline;. Due to technical limitations I cannot use <![If IE] -->-stuff in HTML, I need to stay within the CSS file.
You can use selectors like so:
\9 – IE8 and below, * – IE7 and below, _ – IE6
So in your case:
*display: inline;
You can simply add this to the rest of the css:
div{
display: inline-block;
// some;
// other;
// css;
*display: inline;
}
Read my blog post on this.
Update
IE version 5 till 8. (They are all
affected) – Cobra_Fast 1 min ago
So in this case, you'd use
div{display\9:inline;}
A horrible way to do it is: http://www.webdevout.net/css-hacks
Even though you cannot change the HTML I'd read up on http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
IE actually has quite good support for inline-block - if the element is originally an inline element. So try using a span instead of the div.
To make inline-block work on block-level elements in IE7, I frequently add this to my answers:
Overlapping inline div
One list, simple float left, different cell sizes
How do I center a list as shown here?
multi-line tabs
Remove margin between rows of overflowing inline elements
How can I wrap content around a UL CSS Menu so content is seamless?
I sure hope what I'm suggesting everywhere actually works :D
See: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
selector {
display: inline-block;
*display: inline;
zoom: 1;
}
Using flex box, I'm trying to create flexible article nodes that wrap when they fill their parent container (4 or so nodes per row). Currently, they remain on one line and overflow the parent without wrapping. Any ideas?
My css:
.container {
display: -webkit-box;
height: 100%;
width: 100%;
-webkit-box-lines: multiple;
-webkit-box-orient: horizontal; }
.container article {
-webkit-box-flex: 1; }
I have been experimenting a bit with flexboxes, but as far I could find out, there is no current browser which implements the "box-lines: multiple" command.
The Apple developer documentation claims that it exists since iOS 1.0 and Safari 3.0, however the status of all the flex-box commands still reads "under development". So the command exists, and is not rejected as an error, but only the "single" value is currently working, as it seems.
IE10 will have it implemented when released. The others might be doing so in the future as well.
http://www.boogdesign.com/b2evo/index.php/ie10-future-of-css-layout?blog=2
Here is another post I found about the topic.
http://www.xanthir.com/blog/b48Z0
"The multiple line support has been marked as at-risk in the new draft, as it appears to require a more extensive treatment than is given to it in this draft."
"A pair of properties, flex-break-before and flex-break-after, can produce explicit line breaks before/after a flexbox child, or prevent linebreaks from ever occuring."