How to offset flex item?

css flexbox margin grid-system
ryanve picture ryanve · May 30, 2017 · Viewed 14.7k times · Source

I'm developing a pure flexbox grid framework called flexboxes. I'm looking to implement a way to offset flex items by a particular number of grid columns in any flex-direction. This is possible with percentage margin but can it be done in a simpler way using flex properties? With what's available in [email protected]? I'd rather not implement margin classes this way because doing to would seemingly require adding classes for all 4 directions to accommodate all flex-direction values.

Answer

Related questions

margin-top only when the flex item is wrapped

I have a flex container with two flex items. I want to set a margin-top on the second one, but only when it's wrapped and not at the first flex line. If possible, I want to avoid using media queries. …

Read More
Better way to set distance between flexbox items

To set the minimal distance between flexbox items I'm using margin: 0 5px on .item and margin: 0 -5px on container. For me it seems like a hack, but I can't find any better way to do this. Example

Read More
Flexbox: center horizontally and vertically

How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally. http://codepen.io/anon/pen/zLxBo

Read More