问题描述
我想在相邻的列中列出一些项目。我不知道会有多少个物品,所以我不能有固定的高度。我希望他们像这样尽可能好地填充空间:
#parent {
background-color: firebrick;
max-height: 200px; /* <-- eliminate */
display: flex;
flex-flow: column wrap;
}
.child {
background-color: #fff;
height: 30px;
width: 100px;
margin: 10px;
padding: 3px;
}
<div id="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>
所以我基本上想要上面的内容,但是在max-height
上没有#parent
,但是当我删除它们时,它们只会放在一个宽列中。
解决方法
columns可以做到:
#parent {
background-color: firebrick;
column-width:120px; /* set the width of columns and the number will be automatic */
column-gap: 20px; /* to replace margin between element */
padding:0 10px;
}
.child {
background-color: #fff;
height: 30px;
display:inline-block; /* use inline-block because block element are buggy */
width:100%; /* make them full width so they behave like block */
margin:10px 0; /* keep only top and bottom margin */
padding: 3px;
box-sizing:border-box;
}
<div id="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>