垂直证明内容

Question

希望这不是一个未解决的任务，但我试图垂直证明一个容器内的div的未知数（ish）。

每个div应该距离彼此的距离相等，另外距离边缘的距离相同。 （假设最后一部分可以在前后使用幻影元素完成）

div将分别填充容器的宽度，容器是设置高度，但容器内元素的数量是未知的。

我假设它可以在一定程度上使用Flexbox完成，但到目前为止我一直没有成功。

Answer 1

像往常一样，无论我搜索多长时间，我都会在问问题后立即找到答案。 ：d

对于那些好奇，或为自己的将来参考：Flexbox的的理由不工作，你只需要多几个选择：

HTML：

<div id="outer-container"> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
    <div class="inner-element"></div> 
</div> 

CSS：

#outer-container { 
    height: 250px; 
    width: 200px; 
    background: red; 
    display: flex; 
    justify-content: space-around; 
    flex-direction: column; 
} 

.inner-element { 
    width: 200px; 
    height: 10px; 
    background: blue; 
} 

https://css-tricks.com/almanac/properties/j/justify-content/

https://jsfiddle.net/WW3bh/

Answer 2

是的，flexbox是最简单的方法。

在容器元件：

.container { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
} 

在子元素：

.container div { 
    flex: 1; 
    width: 100% 
} 

对于元件之间的间隔，就添加填充到容器和底部页边的儿童。

的风格应该是这样的：

.container { 
    /* Same as above, and */ 
    padding: 20px; 
} 

.container div { 
    /* Same as above, and */ 
    margin-bottom: 20px; 
} 

.container div:last-of-type{ 
    margin-bottom: 0; 
    /* So that spacing is even at bottom and top of container */ 
} 

（我打字这个当你发布你的答案，所以我把它无论如何）

Fiddle