敲碎时间,铸造不朽的个人专栏
上一篇

CSS三栏布局——flex

广告
选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。
大纲

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

首先父元素设置flex:display。

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

代码如下所示:

<!DOCTYPE html>
<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%

版权声明:著作权归作者所有。

X

欢迎加群学习交流

联系我们