flex做的圣杯布局

时间：2022-09-02 17:27:31

　　　now，给大家分享一个用flex写的圣杯布局，大家可以参考一下子

　　　首先圣杯布局是两列固定宽度，中间自适应。

　　　我直接说一下步骤，上图，上图

　　　　

　　　1.步骤1

　　　flex做的圣杯布局

　　2.步骤2

　　　　flex做的圣杯布局

　　　　上面就是基本的步骤，下面我把代码给大家，大家感兴趣自己拿回去偷偷的撸就可以

　　　　

<!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-前端实现左中右三栏布局的常用方法&colon;绝对定位，圣杯，双飞翼，flex，table-cell&comma;网格布局等

    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总结五：弹性盒子&lpar;flex&rpar;、弹性盒子布局

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

随机推荐

  1. hive源码之新建一个coroutine

    最近由于项目需要读了一下云风老大的hive项目代码,因为对lua只有熟悉的水平,下面的东西必然多多错误:),只为记录. lua_State *sL = schedule_newtask(L); str ...

  2. &lbrack;转&rsqb;svn diff 替代工具

    svn diff 替代工具 http://blog.csdn.net/fudesign2008/article/details/8168811 一. 使用vimdiff替换svn diff: 对于多数 ...

  3. list&lt&semi;T&gt&semi;升序、降序

    List<test> list = new List<test> (); var result = list.OrderByDescending(p => p.we).T ...

  4. Azure系列2&period;1&period;15 —— SharedAccessBlobPolicy

    (小弟自学Azure,文中有不正确之处,请路过各位大神指正.) 网上azure的资料较少,尤其是API,全是英文的,中文资料更是少之又少.这次由于公司项目需要使用Azure,所以对Azure的一些学习 ...

  5. 《算法导论》——随机化快排RandomizedQuickSort

    今日算法:随机化快排RandomizedQuickSort 基础工作swap交换和partition分治 /* *交换数组的两个元素 *fromIndex和toIndex为要交换的两个元素的索引 */ ...

  6. CS231n&colon; Convolutional Neural Networks for Visual Recognition

    https://zhuanlan.zhihu.com/p/28522637 https://zhuanlan.zhihu.com/p/21930884 mark

  7. Enginering English for interview （1）

    I was lucky to work in a foreign company, Here is an overview of the interview test : 1.Because of t ...

  8. Spring注解学习笔记一

    一.Retention注解Retention(保留)注解说明,这种类型的注解会被保留到那个阶段. 有三个值: 1.RetentionPolicy.SOURCE —— 这种类型的Annotations只 ...

  9. Java程序实现密钥库的维护

    1 Java程序列出密钥库所有条目 import java.util.*; import java.io.*; import java.security.*; public class ShowAli ...

  10. Laravel 控制器 Controller 传值到 视图 View 的几种方法总结

    单个值的传递   with public function index() { $test = "测试"; return view('test.index')->with(' ...

相关文章