我正在try 创建一个看起来像this的布局
我可以让屏幕从中间分成两半,右手边的东西垂直居中.
然而,当我试图在右侧嵌套一个Flexbox时,我无法让它分布在右侧的宽度上.
html {
height: 100%;
}
body {
height: 100%;
}
.row {
display: flex;
height: 100%;
}
.column {
flex-basis: 50%;
box-sizing: border-box;
border: 1px black solid;
}
.row2 {
display: flex;
justify-content: space-between;
border: 1px black solid;
}
.column2 {
box-sizing: border-box;
border: 1px black solid;
}
.content {
display: flex;
align-items: center;
}
<div class="row">
<div class="column">
test title
</div>
<div class="column content">
<div class="row2">
<div class="column2">
abc
</div>
<div class="column2">
abc
</div>
<div class="column2">
abc
</div>
<div class="column2">
abc
</div>
</div>
</div>
</div>
我以为第二行的JUSTY-CONTENTS:SPACE-BETWAGE会在屏幕的右半部分的宽度上均匀地分布4个(或其他数量)的"ABC"S,但它们只是堆叠在左边.似乎第2行没有正确填充父级的宽度.我猜JUSTY-内容起作用了,但没有宽度来传播项目.我怎么才能解决这个问题呢?