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%

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

相关推荐

用来显示页面布局,margin,padding的CSS hack

在做前端开发过程中,有时要查看整体页面的布局,padding,margin。设置是在不同浏览器的实现情况。以下Javascript脚本可以添加到浏览器的书签中,用来打开显示页面的布局,margin以及padding。CSS hack脚本javascript: (function() { var elements = document.body.getElementsByTagName('*');

解决IE11 Flex布局文本不换行的问题

在页面上使用了flex来布局,代码如下:CSS:.container{     display: flex;     flex-direction: column;     border: 1px solid red;     align-items: center;   }   .item {     border: 

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主

Angular CLI:集成Angular Flex Layout

Angular CLI创建项目ng new myproject 安装Angular Flex Layoutnpm install @angular/flex-layout --save 导入Angular Flex Layout NgModule模块src/app/app.module.t

[译]iOS11安全区布局指南(Safe Area Layout Guide)

Apple在iOS7为UIViewController新增了topLayoutGuide和bottomLayoutGuide属性。它们可以让你创建约束以避免内容被UIKit的横条,如状态、导航或标签栏覆盖。在iOS 11这些布局指南被废弃,并被单一的安全区布局指南代替。顶部和底部布局指南——概述这是使用顶部和底部布局指南在导航控制器和标签栏插入视图控制器的示例:绿色的内容视图相对底部锚点