column的快速使用

基本样式

---

column-count

column-count: 3
简单的演示，可以变成3列。他只能用数字调节
并且屏幕最小还是3列！非常不友好

    <div id="box">
        <p>孟子是战国时期的大思想家...</p>
        <p>（学商人磨刀，如果没有这一段不成立下一段第...</p>
        <p>孟母知道后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p>
    </div>
    
    
    <style>
        #box{
            column-count: 3;
        }
    </style>

---

column-width

其实就是盒子固定宽度，然后边距自适应

    <div id="box">
        <p>孟子是战国时期的大思想家...</p>
        <p>（学商人磨刀，如果没有这一段不成立下一段第...</p>
        <p>孟母知道后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p>
    </div>

    <style>
       #box{
          column-width: 200px;
       }
    </style>        

---

columns

他扮演一个组合套餐，如果3则最多3个。宽度200随意。最终最小1列，最大3
非常友好

    <div id="box">
        <p>孟子是战国时期的大思想家...</p>
        <p>（学商人磨刀，如果没有这一段不成立下一段第...</p>
        <p>孟母知道后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p>
    </div>

    <style>
        #box{
           columns:3 200px;
        }
    </style>        

---

column-gap

他就是边距用的！相当于margin宽

    <div id="box">
        <p>孟子是战国时期的大思想家...</p>
        <p>（学商人磨刀，如果没有这一段不成立下一段第...</p>
        <p>孟母知道后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p>
    </div>

    <style>
        #box{
            columns:3 200px;
            column-gap: 80px;
        }
    </style>        

---

column-rule

就是边距太大，放一条线就更美了！而且跟border一模一样

    <div id="box">
        <p>孟子是战国时期的大思想家...</p>
        <p>（学商人磨刀，如果没有这一段不成立下一段第...</p>
        <p>孟母知道后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p>
    </div>

    <style>
        #box{
          columns:3 200px;
          column-rule: 1px solid #ccc;
        }
    </style>        

---

column-fill

其实他就是定义高度后往里填充， 如果前2个没填满。第三个空着
但是前提是必须有 高度和3个固定盒子3个数量
然后再column-fill

    <div id="box">
        <p>孟子是战国时期的大思想家...</p>
        <p>（学商人磨刀，如果没有这一段不成立下一段第...</p>
        <p>孟母知道后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p>
    </div>

    <style>
       #box{
          columns:3 200px;
          height:600px;
          column-fill:auto;
       }
     </style>        

---

column-span

中断插一行用的，比如宽度百分百插一个大标题！像报纸上文章的一个大标题或者海报

    <div id="box">
        <p>孟子是战国时期的大思想家...</p>
        <p>（学商人磨刀，如果没有这一段不成立下一段第...</p>
        <h2>苦海无涯回头是岸！！！！</h2>
        <p>孟母知道后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p>
    </div>

    <style>
       #box{
           columns:3 200px;
           height:600px;
           column-fill:auto;
       }
      h2{
         column-span: all;
      }
    </style>