1. 一行的元素平分整行宽度

    
    
     
      
      
       Hello World
      
    
     
    
     
      
      
       Hello World
      
    
     
    
     
      
      
       Hello World
      
    
     
  
    

.box {  padding: 20px;  border: 1px solid #ddd;}.columns{  display: flex;}.column {  flex: 1}

最重要的一点是给这一行的父元素(columns)的直接子元素(column)设置flex: 1。这样元素才会平分整行空间，否则就只会占据元素本身的大小，挤在一起。

2. 指定元素占据一定的宽度

这里我们按照常用的12列网格系统来计算。那么我们有以下几个需求：

1. 指定元素占据的列数
2. 当总的列数加起来超过12时，自动切换到下一行

    
    
     
      
      
       Hello World
      
    
     
    
     
      
      
       Hello World
      
    
     
    
     
      
      
       Hello World
      
    
     
    
     
      
      
       Hello World
      
    
     
  
    

.columns{  display: flex;}.columns.is-multiline{  flex-wrap: wrap;}.column {  flex: 1}.column.is-6 {  width: 50%;  flex: none;}.column.is-2{  width: 16.66667%;  flex: none;}.column.is-10 {  width: 83.333%;  flex:none;}

这里的重点是给column一个辅助类is-*, is-*的定义一方面通过百分比指定了宽度，另一方面重要的是设置了flex:none，否则元素就还是会采用平分宽度的方法而非指定。

第二点是给了columns一个辅助类is-multiline。is-multiline的作用是设置了flex-wrap: wrap。如果没有这个属性，超出12列的宽度之后，这些列就不会向下走，而是再向右延伸。

3. 元素占据原本的宽度

    
    
     
      
      
       Hello World
      
    
     
    
     
      
      
       Hello World
      
    
     
    
     
      
      
       Hello World
      
    
     
  
    

.columns{  display: flex;}.column {  flex: 1}.column.is-narrow{  flex:none;}

这里我们给希望只占据元素本来的宽度的column一个辅助类is-narrow。它设置了flex:none这个属性，否则的元三个元素就会平分整行的宽度。添加is-narrow类，前后两个元素就占据本来的宽度，而中间那个元素就会占据剩余的宽度。

参考