CSS - 可以重排列中的复选框吗？

Question

当容器的高度发生变化时,是否可以将动态/未知数量的复选框水平回流到列中？这是我的意思的简单图表:

高度= 180px(20px*9复选框):

[ ] Checkbox 1
[ ] Checkbox 2
[ ] Checkbox 3
[ ] Checkbox 4
[ ] Checkbox 5
[ ] Checkbox 6
[ ] Checkbox 7
[ ] Checkbox 8
[ ] Checkbox 9

高度= 140px(20px*7复选框):

[ ] Checkbox 1    [ ] Checkbox 8
[ ] Checkbox 2    [ ] Checkbox 9
[ ] Checkbox 3
[ ] Checkbox 4
[ ] Checkbox 5
[ ] Checkbox 6
[ ] Checkbox 7

高度= 100px(20px*5个复选框):

[ ] Checkbox 1    [ ] Checkbox 6
[ ] Checkbox 2    [ ] Checkbox 7
[ ] Checkbox 3    [ ] Checkbox 8
[ ] Checkbox 4    [ ] Checkbox 9
[ ] Checkbox 5

随着容器元素的高度缩小,复选框元素将水平溢出到新列中.

注意: 我很清楚我可以通过编程方式创建自己的列,而我只是想看看纯HTML/CSS是否可行.

Answer 1

您有2个选项可供选择.

http://codepen.io/cimmanon/pen/GvmIs

多列模块

在这两个选项中,这个选项具有最广泛的浏览器支持.您必须事先定义列的宽度.

ul {
  height: 25%;
  columns: 10em;
  column-fill: auto;
}

http://caniuse.com/#feat=multicolumn

Flexbox的

Flexbox支持相当差,因为它刚刚进入CR,支持包装的浏览器子集非常低(目前只有Opera,Chrome和IE10 +支持它).您只需要指定容器的高度,它将为您完成剩下的工作.

ul {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  height: 25%;
}
@supports (flex-wrap: wrap) {
  ul {
    display: flex;
  }
}

http://caniuse.com/#feat=flexbox(IE10是唯一列出支持包装的部分支持的浏览器)