CSS3的flex弹性盒模型布局的示例分析

css3的flex弹性盒模型布局的示例分析，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

Flexible Box(弹性盒子)能让页面的分布更合理和方便，
这是之前使用常规的布局方式所做不到的。

XML/html Code复制内容到剪贴板

1. <div class="warp">  
       <div class="modular">1</div>  
       <div class="modular">2</div>  
       <div class="modular">3</div>  
       <div class="modular">4</div>  
   </div>

display:flex和display:box有什么区别？

前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。

CSS Code复制内容到剪贴板

1.   
   .warp{   
       width: 100%;   
       height: 100px;   
         
         
         
       display: -WEBkit-box;   
       display: -moz-box;   
       display: -webkit-flex;   
       display: -moz-flex;   
       display: -ms-flexbox;   
       display: flex;   
         
         
       -webkit-box-pack:justify;   
       -webkit-box-align: ustify;   
       -moz-box-pack:justify;   
       -moz-box-align:justify;   
       box-pack:justify;   
       box-align:justify;   
         
         
       flex-direction:row;   
       -webkit-flex-direction:row;   
         
       flex-wrap:nowrap;   
         
       flex-flow:row nowrap;   
         
       justify-content:center;   
         
       align-items:center;   
         
       align-content:center;   
   }      
     
   .warp .modular{   
       width:80px;   
       height:80px;   
       background-color:#eee;   
       text-align:center;   
         
       order:-1;   
         
       flex-grow:1;   
         
       flex-shrink:2;   
         
       flex-basis:auto;   
         
       flex:1 2 100px;   
         
       align-self:center;   
   }

直接上代码，写了个Demo便于理解,其中warp为父元素，称为“伸缩容器，modular为子元素，称为“伸缩项目”。

1) Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局。

2) 目前没有浏览器支持 box-flex 属性，Firefox 支持替代的 -moz-box-flex 属性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

3) CSS的columns在伸缩容器上没有效果。

4) float、clear和vertical-align在伸缩项目上没有效果。

例：移动端导航（居中，左右，自适应居中，自适应竖向排列）

CSS Code复制内容到剪贴板

1. <style type="text/css">   
       .nav{   
           background:#00BFFF;   
           display:-webkit-box;   
           display:-moz-box;   
           display:-ms-flexbox;   
           display:-webkit-flex;   
           display:flex;   
           -webkit-flex-flow:row wrap;   
             
           -webkit-flex-flow:column wrap;   
             
           justify-content:flex-start;   
             
           justify-content:flex-end;   
       }   
       .nav a{   
           text-decoration:none;   
           display:block;   
           padding:1em;   
           color:#fff;   
             
           flex:1;   
       }   
       @media all and (max-width: 800px) {   
           .nav{   
                 
               justify-content:space-around;   
           }   
       }   
   </style>

XML/HTML Code复制内容到剪贴板

<ul class="nav">  
    <li><a href="#">1</a></li>  
    <li><a href="#">2</a></li>  
    <li><a href="#">3</a></li>  
    <li><a href="#">4</a></li>  
</ul>

例：移动端常用自适应布局

CSS Code复制内容到剪贴板

1. 
   

2. <style type="text/css">   
       .wrapper{   
           display:-webkit-box;   
           display:-moz-box;   
           display:-ms-flexbox;   
           display:-webkit-flex;   
           display:flex;     
           -webkit-flex-flow:row wrap;   
           flex-flow:row wrap;   
       }   
       .wrapper > *{   
           padding:10px;   
           flex:1 100%;   
       }   
       .header{   
           background:#FF6347;   
       }   
       .footer{   
           background:#90EE90;   
       }   
       .main{   
           background:#00BFFF;   
       }   
       .aside-1{   
           background:#FFD700;   
       }   
       .aside-2{   
           background:#FF69B4;   
       }   
       @media all and (min-width: 600px) {   
           .aside{   
               flex:1 auto;   
           }   
       }   
       @media all and (min-width: 800px) {   
           .main{   
               flex:3 0px;   
           }   
           .aside-1{   
               order:1;   
           }    
           .main{   
               order:2;   
           }   
           .aside-2{   
               order:3;   
           }   
           .footer{   
               order:4;   
           }   
       }   
   </style>

XML/HTML Code复制内容到剪贴板

<div class="wrapper">  
    <header class="header">顶部</header>  
    <article class="main">  
        <p>我在中间显示的文字</p>     
    </article>  
    <aside class="aside aside-1">我在左边显示的文字</aside>  
    <aside class="aside aside-2">我在右边显示的文字</aside>  
    <footer class="footer">底部</footer>  
</div>

关于CSS3的flex弹性盒模型布局的示例分析问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网VUE频道了解更多相关知识。