html - 如何自动将 CSS 模拟的表格单元格拆分为多行？

Question

我正在使用 display: table 和 display: table-cell 属性在父元素中均匀分布一些 div。然而，它们都出现在同一行，所以如果太多，它就会变得拥挤，就像这样:

我已经为 children 设置了一个 min-width 但它被忽略了。有没有办法让 child 超过一定高度自动分成多行？我不会总是能够确定 child 的数量，所以我宁愿只有一个父 div。

HTML

        <div class="panel-body select-body">
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
        </div>

CSS

.select-body {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.board {
    border: 1px solid blue; /* temporary */
    width: 15%;
    min-width: 100px;
    height: 30px;
    display: table-cell;
}

.board > input[type="checkbox"] {
    vertical-align: middle;
    margin-left: 8px;
    margin-right: 5px;
}

.select-label {
    position: absolute;
    margin-top: 3px;
}

Answer 1

我不知道有什么方法可以将它分成几行；表格单元格解决方案专门用于创建单行。

您真正需要的是 flex-box。在这里查看示例:http://css-tricks.com/snippets/css/a-guide-to-flexbox/