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

我有两个flexbox列，但其中一个只是空的，用作另一列的“左边距”。使用柔性单位作为元素的边距/填充？

我想，以避免在标记插入第一列，但也许界定第二列类似

margin-left: flex-1

这应该稍稍偏出添加左余量为“flex 1”单元。

有没有办法？

澄清该投票决定关闭，因为不清楚之一。

您有一个宽度为300px的柔性盒，里面有一列flex: 1，另一列有flex: 2。

的“柔性单元”将100px（你是3个弯曲单元（1 + 2），300/3 = 100）

来源

2015-12-04 Fez Vrasta

没有这样的单元 –

澄清;而不是使用保证金，您试图使用空的Flexbox项目（它永远不会有任何内容）？ –

是的，因为我需要在左侧有一个空格，因为'flex：1'宽 –

它看起来像要在左手侧的空的空间，并且希望第二列将被推到右边。如果是这样的话，我认为你可以通过添加一个宽度（％）到你的第二列解决您的问题，以下属性添加到您的容器：

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

摆脱第一列在一起。

来源

2015-12-04 18:13:18 Froy

但我想第二列是灵活的，在完整的代码中我有几列，其中大多数内容也在第一列，但在其中一些没有。 –

您可以向两列添加％，并根据屏幕大小保留宽度。 – Froy

如果我需要添加另一列？我使用flexbox，因为我利用它的功能... –

您可以使用justify-content属性来获得所需的结果。如果你想保持灵活性，你必须给出剩余列的宽度，单位为％。

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

.two { 
    flex-basis: 66%; 
}

见codepen：http://codepen.io/anon/pen/YwzxqM

如果你有更多的列，那么你必须在它们之间分配100％的宽度，就大功告成了。

来源

2015-12-04 18:17:23 Vi100

我的例子很简单，为了有一些工作...但我可能有更多的列，并且我可能需要flexbox。然而感谢您的解决方案，它可以为特定的情况下 –

更新的回答，您可以使用柔性基础以及 – Vi100

它是如何改变的事情一解决方法吗？我仍然需要手动计算百分比吗？ –

您可以使用Flexbox的电网是一样的自举电网只是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

来源

2015-12-04 19:18:31

偏移量使用边距作为％来推送它们。我认为OP正在寻求一个灵活的解决方案。 –

既然你仍然不能设定保证金为flexbox单位，我认为这是最接近OP要求。 –

所以标准是你想要左栏是一个"flex-margin" at 常数长度之一flex-unit？看一看，看看我是否正确地开心*。

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

*这是真棒！拼写检查接受“grokking”！

来源

2015-12-04 20:27:32 zer00ne

所以，你的问题是要清理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>

来源

2015-12-04 22:35:52 vals

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

回答

相关问题