前端移动App flex布局方法

阅读目录

• flex布局介绍：
• flex布局实例：
• flex布局的其它css属性：
• 兼容：
•  参考：

回到顶部

flex布局介绍：

　　flex布局很灵活， 这种布局我们也可以称之为弹性布局，  弹性布局的主要优势就是元素的宽或者高会自动补全;

回到顶部

flex布局实例：

　　比如有两个div，一个div的宽度为100px， 想让另外一个div的占据剩下的宽度：

    
    
    


    

        
child
        
child1
    

　　或者有两个div，一个高度为100px， 另外一个高度自动补全当前界面下剩余的高度：

    
    
    


    

        
child
        
child1
    

　　所以说flex布局是很灵活， flex布局没出现之前，这种布局不好实现， 只能通过-webkit-calc的方式， 或者使用javascript的方式动态修改元素的样式，还有水平方向元素自动适应布局等， 用了flex，css的布局方式更加多样化了；

　　flex布局也可以实现未知宽高的元素自动居中， 以前用的比较多的居中布局方式主要为固定宽高的负margin居中：

运行下面代码

    
    
    


    

        

            hehe
        
    

　　子元素css的样式flex：auto或者flex：1的时候， 该子元素会自动适应当前宽高：

　　如果一个父元素为flex布局， 内部元素的宽度会根据各自的flex属性值进行等比切分：

运行下面代码

    
    
    


    
    

        

            child
        
        

            chi， child占用1/4的百分比， chi占用3/4的百分比
        
    
    

    

    
    

        

            child
        
        

            chi， child固定长度， chi自动适应
        
    
    

    

    
    

        
child1
        
child2, 两边固定宽度， 中间自动适应
        
child3
    

　　高度自动适应的demo：

    
    
    


    

        
header
        
bodyer
        
footer
    

　　通过flex布局可以模拟一个微信的聊天窗口：

    
    
    
    


    
    

        

            消息
        
        

            

                hehe我哟我去
                

            
            

            

                hehe
                

            
            

            

                hehe我哟我去
                

            
            

            

                来啊， 哈哈
                

            
            

            

                来啊， 哈哈
                

            
            

            

                来啊， 哈哈
                

            
            

            

                来啊， 哈哈
                

            
            

            

                来啊， 哈哈
                

            
            

            

                来啊， 哈哈
                

            
            

            

                来啊， 哈哈
                

            
            

            

                来啊， 哈哈
                

            
            

            

                来啊， 哈哈
                

            
            

            

                来啊， 哈哈
                

            
        
        

            
            发送
        
    
    

flex布局的其它css属性：

　　Flex 容器属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

　　Flex 条目属性：

• order
• align-self
• flex-grow
• flex-shrink
• flex-basis

 

兼容：

　　android 4.4以上版本支持display:flex。低版本不支持。

　　安卓4.1，以及4.1以下不支持flex布局， 必须考虑别的方案；

　　android的低版本无法使用display:flex， 但是可以使用display:box替代；

　　要记得加浏览器前缀， 兼容写法如下：

运行下面代码

  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

　　 

 参考：

　　caniuse：http://caniuse.com/#feat=flexbox

　　MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

　　MDN参考资料：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox

　　ruanyifeng：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

 flex布局笔记：

1.兼容到IE10及以上；
2.弹性布局的项目（item）默认没有间隔
3.容器有用的属性：

1. justify-content:（默认flex-start）

flex-start | flex-end | center | space-between | space-around;

2.align-items:（默认值stretch,如果项目未设置高度或设为auto，将占满整个容器的高度）

3.项目有用的属性

1）flex-grow （默认为0，不放大，弹性布局默认不改变项目的宽度，等于1时，就表示不改变项目的宽度，等于1时，就表示改项目宽度拉伸，占据当前行的所有剩余宽度）

2）flex-shrink（定义了项目的缩小比例，默认为1，即如果控件不足，该项目将缩小）

3）flex-base（为项目设定固定宽高，默认是auto，即项目本来的大小）

4）align-self（给某个项目开小灶）