CSS三栏布局——flex

flex布局现在越来越流行，很多框架都采用flex布局。今天我们采用flex来实现三栏布局。

首先父元素设置flex:display。

左右分别设置flex: 0 0 200px。

代码如下所示：


<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>三列布局</title>
   <style>
       .box{
           height: 500px;
           background-color: bisque;
           position: relative;
           display: flex;
       }
       .box .box-content {
           flex: 0 1 auto;
           margin: 0 10px;
           background-color: blue;
           width: 100%;
       }
       .box .box-left {
           flex: 0 0 200px;
           background-color: green;
       }
       .box .box-right {
           flex: 0 0 200px;
           background-color: pink;
       }
       header,footer {
           height: 75px;
           background-color: aqua;
       }
   </style>
</head>
<body>
   <header>
   </header>
   <div class="box"> 
       <div class="box-left">
           左边
       </div>
       <div class="box-content">
           内容区
       </div>
       <div class="box-right">
           右边
       </div> 
   </div>
   <footer>
   </footer>
</body>
</html>

这里需要注意的是：中间的内容区可能会因为内容不足而撑不开容器，因此最好设置width:100%