基础的CSS3弹性盒Flexbox布局使用实例

效果如下图所示：

Example 3： flexbox基本页面布局

CSS Code复制内容到剪贴板

<div class="container">   
      <nav>   
<div class="container">   
      <nav>   
        <ul>   
          <li>   
         <a href="http://www.alloyteam.com/">menu1</a>   
          </li>   
       </ul>   
     </nav>   
   <div class="content">   
      <section >   
         …   
     </section>   
         <section>   
       …   
      </section>   
   </div>   
 </div>   
  
.container {   
    display: -webkit-flex;   
    display: flex;   
}   
nav {   
      width: 200px; /*固定宽度*/  
}   
.content{   
  -webkit-flex: 1; /*除去nav的固定宽度后，剩下的宽度都是属于content的*/  
            flex: 1;   
}  

效果如下图所示：

Example 4： flexbox的居中布局

CSS Code复制内容到剪贴板

<div class="vertical-container">   
  <section class="vertically-centered">   
    <p>   
      CSS里总算是有了一种简单的垂直居中布局的方法了！   
    </p>   
  </section>   
</div>   
  
.vertical-container {   
  display: -webkit-flex;