flex布局

flex是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

• IE11或更低版本不支持flex或仅支持部分
• 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

1.0 父项常见属性

• flex-direction：设置主轴的方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上的子元素的排列方式（多行）
• align-items：设置侧轴上的子元素排列方式（单行）
• flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
• flex: 定义子项目分配剩余空间，用flex来表示占多少份数。
• align-self: 控制子项自己在侧轴上的排列方式,允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
• order: 定义项目的排列顺序，数值越小，排列越靠前，默认为0。

1.1 实现效果

WechatIMG5548.png

1.2 代码如下

ul {
    padding: 0 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

li {
    list-style-type: none;
    margin-bottom: 10px;
    width: calc(100%/ 4);
}

ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

ul li a span:nth-child(2) {
    margin-top: 10px;
}

.local-icon1 {
    display: block;
    background: url('../imgs/localnav_bg.png') no-repeat 0 0;
    background-size: 32px 160px;
    width: 32px;
    height: 32px;
}

    

       
           
           吃喝玩乐
       
    
    

        
            
            吃喝玩乐
        
    
    

        
            
            吃喝玩乐
        
    
    

        
            
            吃喝玩乐
        
    
    

        
            
            吃喝玩乐
        
    
    

        
            
            吃喝玩乐