3
我想要有一个均匀间隔的可变数量的列,其中包含垂直居中的可变数目的子元素。我几乎在我想要的位置,但是如果我将子元素的数量减少到一个,则垂直对齐失败(第一行和第五行)。用flexbox垂直对齐单个子元素
我在做什么错?
守则(http://codepen.io/anon/pen/bpvMda):
.myView {
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-around;
height: 500px;
width: 500px;
}
.wpType {
flex: 0 1 auto;
display: flex;
flex-flow: row wrap;
align-items: space-around;
align-content: center;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
}
.wpType:nth-child(even){
background: blue;
}
.wpType:nth-child(odd){
background: red;
}
.wp {
flex: 0 1 auto;
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
background: white;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="myView">
<div class="wpType">
<div class="wp"></div>
</div>
<div class="wpType">
<div class="wp"></div>
<div class="wp"></div>
<div class="wp"></div>
</div>
<div class="wpType">
<div class="wp"></div>
<div class="wp"></div>
<div class="wp"></div>
</div>
<div class="wpType"><div class="wp"></div>
<div class="wp"></div></div>
<div class="wpType"><div class="wp"></div></div>
</div>
正如下面的答复中提到,如果你想列,'弯曲方向:column'是最佳的。 –
至于为什么它不适用于行...是因为'align-content'只适用于多行......也就是说,包装后。 –