Use flex unit as margin/padding of an element? - css

Question

I've two flexbox columns, but one is just empty and is used as "left margin" for the other column.
http://codepen.io/FezVrasta/pen/MKWvwo
I'd like to avoid to insert in the markup the first column but maybe define to the second column something like
margin-left: flex-1
this should just add a left-margin wide as a "flex 1" unit.
Is there a way?
PS
clarifying for the one that voted to close because unclear.
You have a flexbox with width 300px, inside, you have a column with flex: 1 and one with flex: 2.
The "flex unit" will be 100px (thee are 3 flex units (1 + 2), 300/3= 100)

Answer 1

So, your issue is to clean the DOM and avoid an artificial element.
You can use a pseudo element for this
.flex {
display: flex;
}
.flex:before {
content: "";
background: red;
flex: 1;
}
.two {
background: blue;
flex: 2;
}
<div class="flex">
<div class="two"> 2</div>
</div>

Answer 2

It looks like you want an empty space on the left hand side and you want the second column to be pushed to the right. If this is the case I think you can resolve your issue by adding a width(%) to your second column and add the following property to your container:
.flex-container{
justify-content: flex-end;
}
Get rid of the first column all together.

Answer 3

You can use the justify-content property to get the desired result. You must give a width to the remaining column that, if you want to keep it flexible should be in % units.
.flex{
justify-content: flex-end;
}
.two {
flex-basis: 66%;
}
See codepen: http://codepen.io/anon/pen/YwzxqM
If you have more columns then you have to distribute the 100% width among them and you're done.

Answer 4

You can use flexbox grid which is same as bootstrap grid just with Flexbox
http://flexboxgrid.com/
DEMO
<div class="row">
<div class="col-xs-offset-4 col-xs-8 column"></div>
</div>
So here col-xs-offset-4 behave same as margin-left

Answer 5

So the criteria is that you want the left column to be a "flex-margin" at the constant length of one flex-unit? Take a look and see if I'm grokking* correctly.
http://codepen.io/01/pen/VewzJL
CSS
html,
body {
box-sizing: border-box;
font: 400 16px/1.4 'Source Code Pro';
height: 100vh;
width: 100vw;
}
.flex {
width: 100%;
height: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: baseline;
}
.one {
background: red;
flex: 0 2 25%;
}
.two {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: flex-start;
background: blue;
flex: 2 0 75%;
}
.two div {
outline: 1px solid yellow;
background-color: cyan;
min-height: 10%;
height: 1.5em;
flex: 2 1 auto;
}
*That's awesome! The spellcheck accepted "grokking"!