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 ...
随机推荐
- TCPDUMP学习笔记。
1.启动 普通情况下,直接启动tcpdump将监视第一个网络界面上所有流过的数据包,注意这里使用超级用户.当用户上网得时候,就会将监视得数据打印出来. 我没使用root用户,结果输入tcpdump命令 ...
- [Leetcode]931.下降路径最小和
题目链接 这一题目首先需要弄懂题目的意思,下降路径最小和指的是在方阵中可以从上往下行走,走过后获得的值最小,方向可以是走左下,右下,直下. 题目和传统的动态规划一样,把边界的值先初始化,然后通过状态转 ...
- POJ 2704
#include <iostream> #include <string> #define LL long long #define MAXN 100 using namesp ...
- Java异常处理设计（二）
考虑对JDK的底层堆栈信息进行处理,一种是重写JDK的Throwable,另一种是在原错误堆栈信息上进行“二次加工”.目前这两种方式我都实现了,效果非常好. 这篇文章主要记录对错误堆栈进行“二次加工” ...
- Django设置联合唯一约束 -- migrate时报错处理
异常信息: a unique database constraint for 2 or more fields together 场景描述: 对于ORM中多对多关系的中间表,如果该关系表是手动创建的, ...
- makemigrations migrate
教程 如何重置迁移 (图片:https://www.pexels.com/photo/sky-flying-animals-birds-1209/) Django迁移系统的开发和优化使其能够进行大量迁 ...
- Android之apk优化
公司的apk越做越大...作为一个有追求的程序员,我觉得有必要给apk瘦身了... 优化之前,先来分析一下apk结构,下面附上一张apk结构图: apk结构.png 由于我这个项目集成了百度地图.百度 ...
- PHP多进程系列笔记（二）
上一篇文章讲解了pcntl_fork和pcntl_wait两个函数的使用,本篇继续讲解PHP多进程相关新知识. 僵尸(zombie)进程 这里说下僵尸进程: 僵尸进程是指的父进程已经退出,而该进程de ...
- Java中函数的重载和重写
重载 重载指的是两个或者两个以上同名函数,但它们的参数不一样,这时会出现函数重载的情况.比如下面这段代码 class Test{ public void a(){ System.out.println ...
- j2ee高级开发技术课程第三周
一.分析Filter例子(轻量级javaee企业应用实战p132) // 执行过滤的核心方法 public void doFilter(ServletRequest request, ServletR ...