How to control number of items per row using media queries in Flexbox?

I had to get rid of the margin around the blocks, because percentage widths are difficult to cleanly apply to elements with margins, but you can see the changes at http://codepen.io/anon/pen/jPeLYb?editors=110 : @mixin max-width($width) { @media screen and (max-width: $width) { @content; } } .container { position: relative; display: flex; flex-flow: row wrap; } .item … Read more

Making a flex item float right

You can’t use float inside flex container and the reason is that float property does not apply to flex-level boxes as you can see here Fiddle. So if you want to position child element to right of parent element you can use margin-left: auto but now child element will also push other div to the … Read more

Zebra striping a flexbox table with wrapping items

Ideally, the selector you want would target the even values contained in the style attribute. Something like this: .Rtable > div[style*=”order”][style*={even}] { … } Basically, this fantasy selector says: target all divs with a style attribute that contains (*) the values “order” and an even number. It could be simplified to just: .Rtable > div[style*={even}] … Read more