css - 使用 flex 单元作为元素的边距/填充？

Question

我有两个 flexbox 列，但其中一个是空的，用作另一列的“左边距”。

http://codepen.io/FezVrasta/pen/MKWvwo

我想避免在标记中插入第一列，但可能会在第二列中定义类似的东西

margin-left: flex-1

这应该只是添加一个左边距宽度作为“flex 1”单元。

有办法吗？

附言

澄清因不清楚而投票关闭的那个。

你有一个宽度为 300px 的 flexbox，里面有一列 flex: 1 和一列 flex: 2。

“flex 单位”将是 100px(有 3 个 flex 单位 (1 + 2)，300/3= 100)

Answer 1

因此，您的问题是清理 DOM 并避免人工元素。

你可以为此使用一个伪元素

.flex {
  display: flex;
  }
  
.flex:before {
  content: "";
  background: red;
  flex: 1;
}
  
.two {
  background: blue;
  flex: 2;
}

<div class="flex">
  
  <div class="two"> 2</div>
  </div>