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. java项目配置域名（tomcat直接配置 or 使用nginx反向代理）

    一:  tomcat直接配置域名:https://blog.csdn.net/qq_36330228/article/details/78516160 二: 使用nginx进行反向代理 tomcat服 ...

  2. python packaging

    python packaging 一.困惑 作为一个 Python 初学者,我在包管理上感到相当疑惑(嗯,是困惑).主要表现在下面几个方面: 这几个包管理工具有什么不同? * distutils * ...

  3. 【转】iOS中属性与成员变量的区别

    [转载自并整理 http://blog.csdn.net/itianyi/article/details/8618128] 一.类Class中的属性property 在ios第一版中,我们为输出口同时 ...

  4. String不得不说的那些事

    一.String.StringBuilder和StringBuffer的区别 1. String是字符串常量,StringBuilder和StringBuffer是字符串变量 String对象创建完成 ...

  5. Webstorm使用教程详解

    Webstorm使用教程详解 Webstorm垂直分栏.左右分栏 Webstorm 主题.背景.颜色等设置的导入导出   使用WebStorm开发web前端 网页中文乱码问题的解决方案 Webstor ...

  6. (转)【OSGI】1.初识OSGI-到底什么是OSGI

    原文:https://blog.csdn.net/acmman/article/details/50848595 目前,业内关于OSGI技术的学习资源或者技术文档还是很少的.我在某宝网搜索了一下“OS ...

  7. (转)Python Mixins 机制

    原文:https://github.com/dengshuan/notes/blob/master/techs/python-mixins.org https://blog.csdn.net/u012 ...

  8. sublime自动对齐Alignment插件快捷键

    [ { "keys": ["ctrl+alt+f"], "command": "alignment" } ]

  9. JavaScript -- TextArea

    -----054-TextArea.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...

  10. 五:理解控件的运行机制(例:基于Control命名空间的简单控件)

    一:先用最简短的话说点理论的1.asp.net中所有的标准控件都可以重写 2.和控件相关的命名空间有 System.Web.UI.Control是所有控件的基类只提供简单的呈现逻辑,不支持样式表 Sy ...