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 ...
随机推荐
- Jmeter之分布式执行测试
一. 安装Java 1.1下载JDK 1) Windows安装jdk,下载完成后,双击安装 2) Linux解压:tar -zxvf jdk-8u74-linux-x64.gz 1.2 Java环境变 ...
- SpringBoot + docker + neo4j
下拉镜像 docker pull neo4j 启动镜像 docker run -d -p 7473:7473 -p 7687:7687 -p 7474:7474 neo4j 打开浏览器:http:// ...
- 29-hadoop-使用phtonenix工具&分页&数据导入
因为rowkey一般有业务逻辑, 所以不可以直接使用rowkey进行分页, startkey, endkey 想要使用SQL语句对Hbase进行查询,需要使用Apache的开源框架Phoenix. 安 ...
- C++关于vector、queue、stack、priority_queue的元素访问
vector.queue.stack.priority_queue对元素进行元素访问时,返回的是对应元素的引用.
- python3 get post请求Yunba RESTful API
一:主要内容 获取云巴appkey和seckey 状态回复说明 get请求 post请求 二:获取云巴appkey和seckey 1. 注册云巴 在云巴官网,注册一个云巴账号,官网地址:https:/ ...
- BEA-290074 <Deployment service servlet received file download request for file "security/SerializedSystemIni.dat". The file may exist, but download of this file is not allowed.>
Bug 19766239 - WLS 12.1.3 - MS NOT STARTING - 'DOWNLOAD OF THIS FILE IS NOT ALLOWED' Issue is fixed ...
- windows7(64位) PHP APACHE MYSQL
- 一.安装软件准备软件版本以本人安装为例,其他版本同理,软件到各官网下载 1.Apache(httpd-2.2.19-win64) 2.PHP(php-5.3.6-Win32-V ...
- 技术笔记5 MINA 和事务
Java NIO框架MINA用netty性能和链接数.并发等压力测试参数好于mina. 特点:1.NIO弥补了原来的I/O的不足,它再标准java代码中提供了高速和面向块的I/O原力的I/O库与NIO ...
- php 冒泡排序的两种思路以及优化
php冒泡排序,两种思路,时间复杂度都是O(n^2),当然最优的时间复杂度就是O(n),以下说的都是正序排列(倒序的话,把内层循环的大于号换成小于号就好了) 第一种冒泡排序 思路就是把第一个数跟所有的 ...
- MAMP 安装phpredis 扩展
phpredis扩展包地址: https://github.com/nicolasff/phpredis 1.下载php源码 (http://php.net/releases/ 选择php5.5.1 ...