CSS:布局篇_用flex布局实现两边顶宽中间自适应(圣杯布局&双飞翼布局)

<!DOCTYPE html>

<html>

<head>

    <title>CSS:布局篇_用flex布局实现两边顶宽中间自适应(圣杯布局&双飞翼布局)</title>

    <style type="text/css">

        *{margin: 0;padding: 0;}

        body{min-width: 700px;}

        .header,.footer{

            border: 1px solid #333;

            background: purple;

            color: white;

            text-align: center;

            height: 50px;

            line-height: 50px;

        }

        .container {

            display: flex;

        }

        .left,.middle,.right{

            background-color: aqua;

            min-height: 130px;

            line-height: 130px;

            border: 1px solid #333;

            text-align: center;

        }

        .left{

            flex-basis: 220px;

            order: 1;

        }

        .middle {

            flex: 1;

            order: 2;

        }

        .right{

            flex-basis: 220px;

            order: 3;

        }

    </style>

</head>

<body>

    <div class="header">

        <h4>header</h4>

    </div>

    <div class="container">

        <div class="middle">

            <h4>middle</h4>

        </div>

        <div class="left">

            <h4>left</h4>

        </div>

        <div class="right">

            <h4>right</h4>

        </div>

    </div>

    <div class="footer">

            <h4>footer</h4>

    </div>

</body>

</html>

html

使用浮动实现《CSS:布局篇_两边顶宽中间自适应(圣杯布局&双飞翼布局)》见→https://www.cnblogs.com/runrunrun/p/11506650.html

思考

-如果向类为middle的div添加数个<h4>middle</h4>，left，right的div为什么会与middle同一高度？

//如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。

答案

参考flex的基本概念→https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

* { margin: 0; padding: 0 }
body { min-width: 700px }
.header, .footer { border: 1px solid rgba(51, 51, 51, 1); background: rgba(128, 0, 128, 1); color: rgba(255, 255, 255, 1); text-align: center; height: 50px; line-height: 50px }
.container { display: flex }
.left, .middle, .right { background-color: rgba(0, 255, 255, 1); min-height: 130px; line-height: 130px; border: 1px solid rgba(51, 51, 51, 1); text-align: center }
.left { flex-basis: 220px; order: 1 }
.middle { flex: 1; order: 2 }
.right { flex-basis: 220px; order: 3 }

CSS:布局篇_用flex布局实现两边顶宽中间自适应(圣杯布局&双飞翼布局)的更多相关文章

  1. CSS（五）圣杯，双飞翼布局

    双飞翼布局 <style> *{ margin:; padding:; } .main{ width: 100%; height: 200px; background: pink; flo ...

  2. 两列布局（浮动、定位、flex）和三列布局（圣杯、双飞翼、flex）

    demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...

  3. css布局-双飞翼布局

    <div class="header">Header</div> <div class="bd"> <div clas ...

  4. CSS中的圣杯布局与双飞翼布局

    一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2. ...

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

    一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...

  6. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...

  7. 只需5分钟！一文读懂CSS布局（二） -- flex布局

    目录 简介 基本概念 容器属性 1. flex-direction 测试代码 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6 ...

  8. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  9. CSS实例详解：Flex布局

    本文由云+社区发表 本文将通过三个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex布局是如何解决CSS布局问题. 一．垂直居中 这里同时用非flex布局和flex布局两种方式来实现,可以对比 ...

  10. 【Taro】363- 玩转 Taro 跨端之 flex 布局篇

    Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有一套跨平台统一的解决方案,能够以最小差异 ...

随机推荐

  1. 【JVM故障问题排查心得】「内存诊断系列」Xmx和Xms的大小是小于Docker容器以及Pod的大小的，为啥还是会出现OOMKilled？

    为什么我设置的大小关系没有错,还会OOMKilled? 这种问题常发生在JDK8u131或者JDK9版本之后所出现在容器中运行JVM的问题:在大多数情况下,JVM将一般默认会采用宿主机Node节点的内 ...

  2. python之路36 MySQL查询关键字

    报错及作业讲解 报错 1.粗心大意 单词拼写错误 2.手忙脚乱 不会看报错 思考错误的核心 作业讲解 '''表与表中数据的关系可能会根据业务逻辑的不同 发生改变 不是永远固定的''' 服务器表与应用程 ...

  3. swift中cocoapods问题

    设置完Podfile后,pod install出现   终端   pod repo add master https://github.com/CocoaPods/Specs.git 出现如下提示   ...

  4. MySQL 留存率和复购率的场景分析

    实际工作中常见的业务场景是求次日留存率,还有一些会对次日留存率增加限制,例如求新用户的次日留存率或者求活跃用户留存率.另外,留存率和复购率看起来都是统计重复出现的概率,但实际求解方法是不一样的. [场 ...

  5. pytorch 配置详细过程

    torch github 项目多 方便,api好调用 cpu版本 装torch 安装最新版本的就可以. torchvision 要版本对应 算法: torchvision版本号= torch版本号第一 ...

  6. 如何在es中查询null值

    目录 1.背景 2.需求 3.准备数据 3.1 创建mapping 3.2 插入数据 4.查询 name字段为null的数据 5.查询address不存在或值直接为null的数据 6.参考链接 1.背 ...

  7. Linux音频采集和在国产化平台中遇到的坑（一）

    Linux音频采集和在国产化平台中遇到的坑(一) 最近在做一个国产化平台的软件项目的开发,是基于国产芯片的银河麒麟系统.其中有一个重要模块,是采集和播放音频数据,播放不用多说了,采集的话,包括采集麦克 ...

  8. Jvm--MinorGC过程

    第一次GC: 在不断创建对象的过程中,当Eden区域被占满,此时会开始做Young GC也叫Minor GC 1)第一次GC时Survivous中S0区和S1区都为空,将其中一个作为To Surviv ...

  9. 阿里百秀后台管理项目笔记 ---- Day04

    来吧展示: step 1 : 实现评论管理数据渲染 利用 ajax 创建接口得到数据使用模板引擎渲染页面 1.1 引入文件 <script src="/static/assets/ve ...

  10. springcloud 02-zookeeper

    转 https://www.cnblogs.com/h--d/p/12643306.html ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的 ...