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

Question

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

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

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

的内容

margin-left: flex-1

这应该只是添加左边距宽作为“flex 1”单位。

有办法吗？

PS 的

澄清那个因为不清楚而投票结束的人。

你有一个宽度为300px的弹箱，里面有一列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>

Answer 2

看起来你想在左侧有一个空的空间，你想要将第二列推到右边。如果是这种情况，我认为您可以通过向第二列添加宽度（％）来解决您的问题，并将以下属性添加到您的容器中：

.flex-container{
   justify-content: flex-end;
}

一起摆脱第一列。

Answer 3

您可以使用justify-content属性来获得所需的结果。您必须为剩余的列指定宽度，如果要保持其灵活性，则应以％单位为单位。

.flex{
   justify-content: flex-end;
}

.two {
    flex-basis: 66%;
}

请参阅codepen：http://codepen.io/anon/pen/YwzxqM

如果您有更多列，那么您必须在其中分配100％的宽度，并且您已完成。

Answer 4

您可以使用与Flexbox一样的bootstrap网格的flexbox网格  http://flexboxgrid.com/

<强> DEMO

 <div class="row">
    <div class="col-xs-offset-4 col-xs-8 column"></div>
 </div>

所以此处col-xs-offset-4的行为与margin-left

相同

Answer 5

所以标准是您希望左栏在 -p 长度为 "flex-margin" flex-unit < / em>的？看一看，看看我是否正确地学习*。

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;
}

*太棒了！拼写检查接受了＆＃34; grokking＆＃34;！