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做的圣杯布局的更多相关文章

  1. css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等

    1.前言 作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会 ...

  2. flex 圣杯布局

    基本思路 圣杯布局分为3段:上.中.下.  中段被分为:左.中.右3块. 1:采用flex布局时,先把弹性容器主轴设置为垂直方向(flex-direction:column) 2:上.中.下3块弹性项 ...

  3. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  4. 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

    一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...

  5. CSS布局-圣杯布局

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

  6. 趋势：flex和grid使布局更简单

    前言:记不久前面试的时候,面试官问我平时用什么布局方式,我非常耿直的说 div+css,利用position,float等布局,这就是非常传统的布局方式,通常都要写比较多的css代码:前几天在知乎上看 ...

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

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

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

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

  9. CSS3总结五：弹性盒子(flex)、弹性盒子布局

    弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...

随机推荐

  1. mybatis四大接口之 StatementHandler

    1. 继承结构 StatementHandler:顶层接口 BaseStatementHandler : 实现顶层接口的抽象类,实现了部分接口,并定义了一个抽象方法 SimpleStatementHa ...

  2. sublime text3：提示 There are no packages available installation 解决方案

    纯属记录,下次能找到解决. 第一步: 在sublime Text3界面按 ctrl+` 出现一个输入框界面 第二步:在输入框输入: import urllib.request,os,hashlib; ...

  3. CentOS7安装MYSQL。

    参考这个文章(网页已存到本地):http://www.cnblogs.com/starof/p/4680083.html 安装完成后,本地登录MYSQL没有问题. 现在主要是在windows下用ora ...

  4. 机器学习-Matplotlib绘图（柱状图，曲线图，点图）

    matplotlib 作为机器学习三大剑客之一   ,比热按时无比强大的 matplotlib是绘图库,所以呢我就分享一下简单的绘图方式 #柱状图 #导报 柱状图 import matplotlib. ...

  5. java项目打成jar包使用

    使用Eclipse打成jar包 1.创建项目hello 2.写java文件 package hell; import java.io.PrintStream; public class Hello { ...

  6. AndroidStudio配置LitePal

    配置,许多书上还有教程都忽略了将LitePal下载下来和拷贝的过程,这里写一个详细的课程 首先,前往GitHub,下载LitePal的包. 然后解压,会看到这个 进入download 自己选个版本,然 ...

  7. centos7 系统优化

    #!/usr/bin/env bash #设置环境变量 export PATH=$PATH:/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/u ...

  8. Docker三剑客之Docker Machine

    一.什么是Docker Machine Docker Machine 是Docker官方编排项目之一,使用go语言编写的,使用不同引擎在多种平台上快速的安装Docker环境,开源地址:https:// ...

  9. 使用代码查看Nutch爬取的网站后生成的SequenceFile信息

    必须针对data文件中的value类型来使用对应的类来查看(把这个data文件,放到了本地Windows的D盘根目录下). 代码: package cn.summerchill.nutch; impo ...

  10. pycharm格式化代码 常用快捷键

    ctrl+alt+L 一 常用快捷键 编辑类: Ctrl + D             复制选定的区域或行Ctrl + Y           删除选定的行Ctrl + Alt + L     代码 ...