3
可変個数の列を均等に配置するようにしています。可変数の子要素が垂直方向に中央に配置されています。私はほとんどどこに行きたいのですが、子要素の量を1に減らすと、垂直方向の配置が失敗します(1行目と5行目)。フレックスボックスで垂直方向に1つの子要素を整列する
私は間違っていますか?
コード(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'は複数行でしか動かないので、なぜ行で動作しないのかは...です。ラッピングした後。 –