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."
Related
Are there any alternatives for -webkit-box-orient?
I need it for the following class:
.max-2-lines{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;
}
However i can see here that only few browsers support that property
Actually you are using the old implementation of line-clamp that require the use of -webkit-box and -webkit-box-orient.
In the near future you will only need to use the line-clamp property:
The line-clamp property is a shorthand for the max-lines, block-ellipsis, and continue properties.
It allows limiting the contents of a block container to the specified number of lines; remaining content is fragmented away and neither rendered nor measured. Optionally, it also allows inserting content into the last line box to indicate the continuity of truncated/interrupted content. ref
You can also check the Legacy compatibility section for more information
I've used to vertically center block-elements like this:
.parent {
display: table-cell;
vertical-align: middle;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
}
When I need IE9 and lower support. Using css-tables as a fall-back for older IE-s of course. I don't need flex for anything else. But recently I started to ask myself: why do I even need flex here? Css-table is a robust solution supported by virtually every browser in this planet and according to this Ben Frain's article it's even faster. Isn't css-table enough here? When asking people about this I got answers like "flex is more modern" etc. That's fine and I do understand, that there are things that are only possible with flex, but it isn't really an answer here. We're talking about simplest centering block-elements.
So i have two questions:
Do i have to use flex in the case like this?
If "yes" - why?
There's a reason we moved from using tables in HTML as a layouting tool.
It's not semantic. When we think of a table we think of a representation of data.
MDN explains it well.
Prior to the creation of CSS, HTML elements were often used as
a method for page layout. This usage has been discouraged since HTML
4, and the element should not be used for layout purposes.
However, HTML emails are an exception where tables are still commonly
used for layout purposes. The reason for this is poor CSS support in
popular email clients.
So unless you're designing e-mail layouts do not use table elements or css table properties for layouting.
You can still use it if you need fallback hacks like in your example, but other than that use modern appropriate methods , be it grids ,flex , floats or whatever.
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/
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
I have inserted content using the :before pseudo-element for a class. I was trying to position this content using margin-top but firefox is simply ignoring the property. The code follows:
.bef {
line-height: 2em;
white-space: nowrap;
font-size:24px;
display: block;
}
.bef:before {
display: block;
margin-top:2em;
padding: 0;
color: #666666;
content:"Hello";
}
Does anybody know why Firefox may be ignoring the margin-top property?
EDIT: Although margin-top is being totally ignored, margin-bottom:-Xem is working and I am able to move the :before element around
It appears that Darko Z is right.
http://jquery.nodnod.net/cases/577
Hypothetically, the first two test cases (separated by <hr>) should render identically, which they do in Gecko (via FF3.5/Mac), but Webkit (via Safari4/Mac) renders the :before and :after segments as inline. The third test case seems to imply that Webkit currently requires the triggering element to be block in order for the generated content to be block.
The spec isn't clear on what the correct behavior is. It may be worth raising a question on www-style to see which rendering engine's behavior is correct, then filing a bug with the incorrect rendering engine to get it fixed in future versions. Feel free to use my code as a test case.
try making .bef display block also? just a guess that the containing element of the :before needs to be block so it can listen to the margin-top...