弹性盒模型常见例子

这篇文章主要是分享了三个例子( 垂直居中、响应式、圣杯 )，介绍了Flexbox的主要应用场景，并与传统方式对比， 感受Flexbox布局带来的便捷开发体验。

1 垂直居中对齐

• 不使用Flexbox

  
        
   
            
  不使用Flexbox
            
  
                
  
                    
                        侠课岛
                    
                
            
            
  使用Flexbox
            
  
                
  
                    
                        侠课岛
                    
                
            
    
  

• 使用Flexbox

   display: flex;
   justify-content: center;
   align-items: center;

使用与否呈现的效果都是一样的

2 自适应导航

• 不使用Flexbox

   .main {
       text-align: right;
   }
   .main li {
       display: inline-block;
     }
   
   /* 小于800px 大于600px */
   @media screen and (max-width: 800px) {
       .main {
           text-align: justify;
             text-align-last: justify;
       }
   }
   /* 小于600px */
   @media screen and (max-width: 600px) {
       .main li {
           display: block;
         }
         .main a {
           display: block;
           text-align: center;
           text-align-last: center;
         }
   }

• 使用Flexbox

  .main {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-end;
  }
  
  /* 小于800px 大于600px */
  @media screen and (max-width: 800px) {
      .main {
          justify-content: space-between;
      }
  }
  
  /* 小于600px */
  @media screen and (max-width: 600px) {
      .main {
          flex-flow: column nowrap;
      }
  }

3 圣杯布局

什么是圣杯布局？比如下面的图片所示：上面是一个标题、中间是左边是目录，中间是内容，右测是一些推荐，底部是一个版权声明。

圣杯布局和双飞翼布局的共同特点都是利用float+margin的负值来实现并列的结构。

• 不使用Flexbox

  .left,.middle,.right {
       position: relative;
      float: left;
      height: 100%;
   }
   .container {
      padding:0 200px 0 200px;
      height: calc(100% - 120px);
   }
   .left {
      margin-left: -100%;
      left: -200px;
      width: 200px;
      background-color: #ffff99;
   }
   .right {
      margin-left: -200px;
      right: -200px;
      width: 200px;
      background-color: #ffff99;
   }
   .middle { 
      width: 100%;
      background-color: #EE8888;
      word-break: break-all;
   }
   .header {
      height: 80px;
      background-color: #cdcdcd;
   }
   .footer { 
      height: 40px;
      background-color: #cdcdcd;
      clear: both;
   }

• 使用Flexbox

  .flex {
      display: flex;
      flex-wrap: nowrap;
  }
  .leftBar {
      width: 200px;
      flex-shrink: 0;
  }
  .container {
      width: 100%;
  }
  .rightBar {
      width: 200px;
      flex-shrink: 0;
  }