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. RedisTemplate设置redis的key时出现\xac\xed\x00\x05t\x00\x0f前缀

    1.问题描述 使用redisTemplate设置redis的key-value,程序运行没有问题,但是却在redis客户端查不到设置的key-value. 2.产生原因 出现这种乱码前缀的原因是没有进 ...

  2. 官网下载CentOS系统镜像过程

    想学习CentOS系统,但是不知道镜像去哪里搞,随便去个第三方发现要么要注册,要么各种广告病毒,或者好不容易找到官网,不仅全英文,有些专业术语也不懂,本文说明官网下载自己想要的CentOS镜像整个流程 ...

  3. AspNetCore底层源码剖析（三）IOC

    title: AspNetCore底层源码剖析(三)IOC date: 2022-09-21 13:20:01 categories: 后端 tags: - .NET 介绍 每个 ASP.NET Co ...

  4. [0]为什么是SpinalHDL-Spinal简介

    [0]为什么是SpinalHDL-Spinal简介 1. verilog/VHDL打咩 稍微先说两句SpinalHDL,硬件描述语言(HDL)分为verilog/VHDL和其他(雾),不过确实是这样, ...

  5. SpringBoot源码学习3——SpringBoot启动流程

    系列文章目录和关于我 一丶前言 在 <SpringBoot源码学习1--SpringBoot自动装配源码解析+Spring如何处理配置类的>中我们学习了SpringBoot自动装配如何实现 ...

  6. （23）go-micro微服务客户端开发（使用负载均衡）

    目录 一 main.go开发 二 客户端代码开发: 三 客户端测试功能 1.发送注册邮件 2.实现注册功能 3.查询用户功能 四 运行项目 五 最后 一 main.go开发 至此,咱们的项目服务端代码 ...

  7. 分布式事务 | 使用 dotnetcore/CAP 的本地消息表模式

    本地消息表模式 本地消息表模式,其作为柔性事务的一种,核心是将一个分布式事务拆分为多个本地事务,事务之间通过事件消息衔接,事件消息和上个事务共用一个本地事务存储到本地消息表,再通过定时任务轮询本地消息 ...

  8. djiango框架推导过程，jinja2模板语法，jiango简介，基本操作命令

    djiango框架推导过程,jinja2模板语法,jiango简介,基本操作命令 一.web框架前戏 web 框架可以理解为是基于会联网的web服务端>>>socket服务端 1.w ...

  9. ua5.4源码剖析：三. C++与Lua相互调用

    概述 从本质上来看,其实说是不存在所谓的C++与lua的相互调用.lua是运行在C上的,简单来说lua的代码会被编译成字节码在被C语言的语法运行.在C++调用lua时,其实是解释运行lua文件编译出来 ...

  10. 网络通讯协议分类-IP地址

    网络通讯协议分类 通信的协议还是比较复杂的,java.net包中包含的类和接口,它们提供低层次的通信细节.我们可以直接使用这些类和接口,来专注于网络程序开发,而不用考虑通信的细节. java.net包 ...