(CSS3 flex box) indicating multiple lines are not working

Question

Using the flex field, I try to create flexible article nodes that wrap when they fill their parent container (4 or so nodes in a row). Currently, they remain on the same line and overwhelm 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; } 

Answer 1

I experimented a bit with flexboxes, but as far as I know, there is no current browser that implements the box-lines: multiple command.

Apple's developer documentation claims to exist with iOS 1.0 and Safari 3.0, but the status of all flex-box commands is still read "under development." Thus, the command exists and does not reject as an error, but only one value currently works. It seems.

Answer 2

IE10 will be released. Others may do this in the future.

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

"Support for the multi-line line was noted as a danger in the new project, because it seems that more intensive treatment is required than indicated in this project."

"A pair of properties, flex-break-before and flex-break-after, can create explicit line breaks before / after the flexbox child, or prevent transitions between them."