基本思路

圣杯布局分为3段:上、中、下。  中段被分为:左、中、右3块。

1:采用flex布局时,先把弹性容器主轴设置为垂直方向(flex-direction:column)

2:上、中、下3块弹性项目设置均匀拉伸(flex:1)或固定上、下两端大小,让中间自动拉伸。注意:flex:拉伸是方向为主轴方向

3:中段部分在设置为弹性容器,主轴方向为水平方向(flex-direction:row),此时左、中、右3块为弹性项目。中间块设置为自动拉伸,左、右两块可设置固定宽度。

代码

    <div class="container">
<div class="header"></div>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
.container{
display: flex;
flex-direction: column;
height: 100vh;
}
.header,
.footer{
height: 75px;
background: greenyellow;
}
.content{
display: flex;
flex-direction: row;
flex:;
}
.left,.right{
width:200px;
background: darkorange;
}
.center{
flex:;
}

flex 圣杯布局的更多相关文章

  1. flex做的圣杯布局

    now,给大家分享一个用flex写的圣杯布局,大家可以参考一下子 首先圣杯布局是两列固定宽度,中间自适应. 我直接说一下步骤,上图,上图 1.步骤1 2.步骤2 上面就是基本的步骤,下面我把代码给大家 ...

  2. flex弹性布局语法介绍及使用

    一.语法介绍 Flex布局(弹性布局) ,一种新的布局解决方案 可简单.快速的实现网页布局 目前市面浏览器已全部支持1.指定容器为flex布局 display: flex; Webkit内核的浏览器, ...

  3. CSS布局-圣杯布局

    圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...

  4. 【CSS-flex】圣杯布局(Holy Grail Layout)、输入框的布局、悬挂式布局、固定的底栏

    1.圣杯布局(Holy Grail Layout) 其指的是一种最常见的网站布局.页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer).其中躯干又水平分成三栏,从左 ...

  5. vue-cli中圣杯布局失效问题

    众所周知vue2在前端框架越来越流行,vue-cli这个脚手架工具是我们前端开发必用的,大大的提升了我们的开发效率.当然对于前端小白来说,有些遇到的问题需要和大家分享一下. 移动端页面经常都是需要圣杯 ...

  6. flex常见布局

    一,常见圣杯布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  7. CSS3新属性之---flex box布局实例

    flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...

  8. css布局 -双飞翼布局&圣杯布局

    一,双飞翼布局 左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> &l ...

  9. css——圣杯布局

    圣杯布局要求 header和footer各自占领屏幕所有宽度,高度固定 中间dontainer部分为左中右三栏式布局 三栏布局中左右两侧宽度固定,中间部分自动填充 实现方式 1.浮动 先定义heade ...

随机推荐

  1. javascript深入理解--作用域,作用域链,闭包的面试题解

    一.概要 作用域和作用域链是js中非常重要的特性,关系到理解整个js体系,闭包是对作用域的延伸,其他语言也有闭包的特性. 那什么是作用域?作用域指的是一个变量和函数的作用范围. 1.js中函数内声明的 ...

  2. .NET Core IdentityServer4实战 第一章-入门与API添加客户端凭据

    内容:本文带大家使用IdentityServer4进行对API授权保护的基本策略 作者:zara(张子浩) 欢迎分享,但需在文章鲜明处留下原文地址. 本文将要讲述如何使用IdentityServer4 ...

  3. c#命名规范汇总12条

    前言 在刚学习c#的时候,在脑子根本就么有命名规范这个概念,有了一定入门的基础,也很难严格要求自己去规范代码的命名,工作后,发现自己的命名和其他人的命名总会有一些出入,总会闹出一些尴尬的笑话,这里汇总 ...

  4. 10 年三线小城 IT 开发的感悟

    一贯都是写技术博客,从来没写过感悟类文章,因为文笔不好.今天看到了大飞的一篇文章,<技术人,请不要封闭自己>,真的感触太深了. 一 先说说我自己,我并非科班出身,大学毕业后一直没找到好的工 ...

  5. for in 和 for of 的区别

    1.for...in 循环:只能获得对象的键名,不能获得键值 for...of 循环:允许遍历获得键值 var arr = ['red', 'green', 'blue'] for(let item ...

  6. Docker入门(三)使用Docker Compose

    Compose介绍   Compose 项目是 Docker 官方的开源项目,负责实现对 Docker 容器集群的快速编排.Compose 是一个用户定义和运行多个容器的 Docker 应用程序.在 ...

  7. DSAPI 调用串口选择界面

    在DSAPI中,可以通过简单的代码调用串口选择界面,当用户选择了其中一个串口时,将返回选择的串口名称(或序号). Dim 串口名称 As String = DSAPI.串口通讯.显示串口选择界面.选择 ...

  8. Oracle 分页查询与数据去重

    1.rownum字段 Oracle下select语句每个结果集中都有一个伪字段(伪列)rownum存在.rownum用来标识每条记录的行号,行号从1开始,每次递增1.rownum是虚拟的顺序值,前提是 ...

  9. 【MQ】消息队列及常见MQ比较

    一.什么是消息队列 我们可以把消息队列比作是一个存放消息的容器,当我们需要使用消息的时候可以取出消息供自己使用.消息队列是分布式系统中重要的组件,使用消息队列主要是为了通过异步处理提高系统性能和削峰. ...

  10. 同事搭一个测试RAC说节点2发现idle了,报ORA-00304

    [oracle@testrac2 11204]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on Wed Jan 16 1 ...