flex 静态瀑布流

html


  

    首页
    

      
内容1
      
内容2
      
内容3
    
  
  

    数码产品
    

      
手机
      
平板
      
相机
      
电脑
      
笔记本
    
  
  

    瀑布流
    

  
  

    制图产品
    

      
PS
      
CAD
    
  
 

    一番内容
    

      
文字1
      
文字2
    
  

css
ul{list-style:none;}
.menuitem{
  max-width:600px;
  display:flex;
  flex-flow:column wrap;
  background:#333;
  height:150px;
}
.menuitem .menuitem-child {
  width:160px;
  height:auto;
  text-align:left;
  
}
.menuitem .menuitem-child a{
  color: gray;
  text-align:left;
}
.menuitem .menuitem-child a:hover{
  color: #fff;
  cursor: pointer;
}

.menuitem > .menuitem-child {
  
}

重点：父元素的定高和 flex-wrap：wrap； column的布局