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. Python启动HTTP服务进行文件传输

    有时候局域网共享个东西不方便,尤其在服务器上的时候,总不能先下载下来,再上传上去吧,于是经常在这台机器用python起个http服务,然后去另一台机器直接访问,一来二去,妥试不爽,特进行一下分离 py ...

  2. 第六节 FAF与GP不工作保护区的绘制

    飞行程序设计软件实践 前一篇文章中,通过风标设计2023插件,我们在CAD中绘制了FAP方式下的精密进近保护区. 接着这个话题我们继续来看一下FAF方式下的保护区应该怎样绘制,以及OAS参数的其它用法 ...

  3. 用云服务器搭建frp服务（超详细）

    初学.没有云服务器的时候总想着怎样才能让别人访问到自己的项目. 在查阅了百度,逛过了一些论坛之后,了解到了 内网穿透 这个词. 经过一番钻研,通过 手机 + KSWEB + 电脑 成功将内网服务映射出 ...

  4. 就dispatch_source_t写的计时器

    直接上干货,我这里用的是Xcode12.4,macOS:11.2.3 OC版本:               swift版本:        

  5. JS原生上传文件，读取文件格式，控制文件只可以上传某些格式，并使用fileReader转换格式

    本文为代码片段记录,方便后期使用哇! <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  6. JS基础简介

    JS基础简介 一.JS简介 JavaScript(简称'js')是一种具有函数优先的轻量级.解释型或及时编译型的编程语言.虽然它是作为开发web页面的脚本语言而出名,但是它也被用到了很多的非浏览器环境 ...

  7. 学习ASP.NET Core Blazor编程系列二十三——登录（3）

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

  8. 支付对接常用的加密方式介绍以及java代码实现

    京东科技 姚永健 一.术语表: 1.对称算法 加密解密密钥是相同的.这些算法也叫秘密密钥算法或单密钥算法,它要求发送者和接收者在安全通信之前,商定一个密钥.对称算法的安全性依赖于密钥,泄漏密钥就意味着 ...

  9. ssh 连接 wsl2

    修改ssh相关config https://cloud.tencent.com/developer/article/1538305 其中,端口可以设置成 2222 以防万一 然后在wsl 中执行如下命 ...

  10. 举例说明postman接口测试

    接口测试的本质就是接口的数据和数据库里的数据作对比 接口测试,可以理解为测的是后端的程序,而系统测试的时候,测试的是前端的程序,前端只有在满足条件的时候才会调到接口,所以接口测试可以测得更全面更准确 ...