flex做的圣杯布局
now，给大家分享一个用flex写的圣杯布局，大家可以参考一下子
首先圣杯布局是两列固定宽度，中间自适应。
我直接说一下步骤，上图，上图
1.步骤1
2.步骤2
上面就是基本的步骤，下面我把代码给大家，大家感兴趣自己拿回去偷偷的撸就可以
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 将整个页面设置为弹性盒 */
html,
body {
height: 100%;
overflow: hidden;
display: flex;
/* 改变主轴的排列方式 */
flex-direction: column;
/* 将主轴上的排列规则改为两端分布 */
justify-content: space-between;
text-align: center;
font-size: 25px;
} /* 设置头部和尾部的颜色 */
.footer,
.header {
height: 88px;
background: #c33;
text-align: center;
line-height: 88px;
font-size: 30px;
} /* 设置中间内容区域样式 */
.center {
flex: 1;
background: #ccc;
display: flex;
} /* 设置左边div和右边div */
.center>.left,.center>.right {
width: 200px;
height: 100%;
background: yellow;
}
/* 将 */
.center>.content {
flex: 1;
background: pink;
} </style>
</head> <body>
<!-- 界面结构区域 -->
<div class="header">header</div>
<div class="center">
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body> </html>
flex做的圣杯布局的更多相关文章
- css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等
1.前言 作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会 ...
- flex 圣杯布局
基本思路 圣杯布局分为3段:上.中.下. 中段被分为:左.中.右3块. 1:采用flex布局时,先把弹性容器主轴设置为垂直方向(flex-direction:column) 2:上.中.下3块弹性项 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局
一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...
- CSS布局-圣杯布局
圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...
- 趋势：flex和grid使布局更简单
前言:记不久前面试的时候,面试官问我平时用什么布局方式,我非常耿直的说 div+css,利用position,float等布局,这就是非常传统的布局方式,通常都要写比较多的css代码:前几天在知乎上看 ...
- 【CSS-flex】圣杯布局（Holy Grail Layout）、输入框的布局、悬挂式布局、固定的底栏
1.圣杯布局(Holy Grail Layout) 其指的是一种最常见的网站布局.页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer).其中躯干又水平分成三栏,从左 ...
- vue-cli中圣杯布局失效问题
众所周知vue2在前端框架越来越流行,vue-cli这个脚手架工具是我们前端开发必用的,大大的提升了我们的开发效率.当然对于前端小白来说,有些遇到的问题需要和大家分享一下. 移动端页面经常都是需要圣杯 ...
- CSS3总结五：弹性盒子(flex)、弹性盒子布局
弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...
随机推荐
- 阿里云RDS数据库备份文件恢复到本地数据库
参考这里:https://help.aliyun.com/knowledge_detail/41817.html 第4.2步要多注释掉一些(应该根据实际报错来注释): [mysqld] innodb_ ...
- Service Fabric学习-从helloworld开始(无状态服务)
原先做服务器程序, 都是部署在xx云上, 也没理解云是个啥, 不就是个服务器(虚拟机)租赁商吗? 好吧, 其实这个是IaaS, 而接下来要学习的ServiceFabric(以下简称SF)是PaaS. ...
- docker学习实践之路[第五站]mysql镜像应用
拉取mysql镜像 docker pull mysql:5.6 #拉取mysql .6版本的镜像 运行mysql镜像 docker run --name some-mysql --restart=al ...
- Eclipse个人规范化设置
为保证在各个在各个系统中获得的代码样式保持一致,规范法化开发,对Eclipse进行一些常用通用设置: 1. 代码块缩进 4个空格,如果使用 tab缩进,请设置成 1个 tab为 4个空格.(阿里巴巴开 ...
- python使用(四)
1.file_os_option.py2.file_option.py3.configfile_option.py4.logger_option.py 1.file_os_option.py # co ...
- Flyweight享元模式(结构型模式)
1.面向对象的缺点 虽然OOP能很好的解决系统抽象的问题,并且在大多数的情况下,也不会损失系统的性能.但是在某些特殊的业务下,由于对象的数量太多,采用面向对象会给系统带来难以承受的内存开销.示例代码如 ...
- Install vsftpd on centos
安装vsftpd程序. sudo yum -y install vsftpd 启动ftp服务. sudo service vsftp start 添加ftp用户,并设置密码. sudo useradd ...
- Google Optimization Tools介绍
Google Optimization Tools(OR-Tools)是一款专门快速而便携地解决组合优化问题的套件.它包含了: 约束编程求解器. 简单而统一的接口,用于多种线性规划和混合整数规划求解, ...
- 手把手教你整合最优雅SSM框架
我们看招聘信息的时候,经常会看到这一点,需要具备 SSM 框架的技能, SpringMVC 可以完全替代 Struts,配合注解的方式,编程非常快捷,而且通过 restful 风格定义 url,让地址 ...
- 使用XHProf分析PHP性能瓶颈(一)
安装xhprof扩展 wget http://pecl.php.net/get/xhprof-0.9.4.tgz tar zxf xhprof-0.9.4.tgz cd xhprof-0.9.4/ex ...