colmn多列布局

最近遇到的布局要求：

• 需要将多个div两列排放；
• 每个div可以折叠和展开
• 两个列之间有8px

看到这里便希望用上一篇文章的多列布局flex来进行排版。于是便有了一下代码：

html:

<li>1XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
<li id="changeli">2XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>

css:

ul {
    border:1px solid red;
    padding:0px;
    display: flex;
    list-style:none;
    flex-flow:row wrap;
    }
    ul li {
    flex: 0 0 49%;
    min-width:50px;
    overflow: auto;
    height: 50px;
    background:#CCC;
    margin:4px;
  }

达到了下面的效果： 然而这个方法有个一个问题，就是无法保证两列之间的宽度固定为8px.因为每一列的宽度固定为49%。根据不同的分辨率的屏幕下，屏幕对1%的宽度的计算不同，出现不符合预期的效果。 于是查看了其他布局方案，看到了有一个CSS3的新布局方式：column布局

column用法介绍

column是css的多列布局解决方案。展现形式如报纸的多列展示效果相同。但是该方法需要做好浏览器兼容工作，否则可能某些浏览器不支持。 注：

-moz-column-width:200px;
-webkit-column-width:200px;
column-width:200px;

• column-width： | auto 设置每列的宽度
• column-count： | auto 设置列的列数
• column-gap： | normal 设置列与列之间的间隙
• column-rule：设置每列的边框的样式

column-rule:10px solid #090;

• column-span：none | all all代表横跨所有列；none表示不横跨列
• column-fill：auto | balance 所有列的高度是否统一
  • auto：列高度自适应内容
  • balance：所有列的高度以其中最高的一列统一
• column-break-inside： auto | avoid 对象内部是否断行
  • auto：既不强迫也不禁止在元素内部断行并产生新列
  • avoid：避免在元素内部断行并产生新列

于是根据以上的用法，实现以上的要求： css:

ul {
    padding: 0;
    margin: 0;
    -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      -moz-column-gap:5px;
      -webkit-column-gap:5px;
      column-gap:5px;
      list-style:none;
      -moz-column-fill: balance
      -webkit-column-fill: balance;
      column-fill: balance;
    }
    ul li {
      padding: 15px;
      border: solid 2px #eeeeee;
      border-radius: 4px;
      margin-bottom: 15px;
      cursor: pointer;
      word-break: break-all;
      -moz-column-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      column-break-inside: avoid;
  }

效果如下： 注：这样的实现存在一些问题：

• 首先，需要注意做好浏览器的兼容；
• 每个项目都是灵活移动的，左侧的高度改变时，会改变后一个或者多个项目的位置。因为高度和个数是由浏览器计算决定的。
• 如果有两列项目固定的要求的话，慎用该方法进行布局。