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. 2022年7月14日，第四组 周鹏，认识JAVA的第二天(；´д｀)ゞ(；д；)

    那天,我遇到了JAVA 然后,我失去了头发 无论我用了多少办法 还是放不下那个它 我哭的像个傻瓜 但也没能留住它 如果再有一次从来 我愿为它披上薄纱 愿它安稳有个家 可我终究还是失去了它 失去了原本为 ...

  2. 学习ASP.NET Core Blazor编程系列二十——文件上传（完）

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

  3. 《线段树学习笔记》 AC代码索引

    P3372 [模板]线段树 1 | LibreOJ#132. 树状数组 3 :区间修改,区间查询 #include <bits/stdc++.h> #define int long lon ...

  4. 10.关于synchronized的一切，我都写在这里了

    大家好,我是王有志.关注王有志,一起聊技术,聊游戏,从北漂生活谈到国际风云. 之前我们已经通过3篇文章由浅到深的分析了synchronized的用法和原理: synchronized的基础:synch ...

  5. Atcoder dp I Coins 题解

    Atcoder链接:Coins Luogu链接:Coins $\scr{\color{BlueViolet}{Solution}}$ 观察数据,发现$ \cal{n} \le 3000 $,说明 $ ...

  6. angular基础之单向绑定，双向绑定以及数据绑定失效的问题

    单向绑定 事件绑定: <input (keyup)="inputChange($event)" /> 属性绑定: <input [value]="inp ...

  7. win32com操作word API精讲 第七集 Range（五）字体格式精讲

    本课程<win32com操作word API精讲&项目实战>视频平台以视频为主,本平台以文字为主,公众号ID:一灯编程 本节课主要讲解使用Range操作Font接口中的字体.字号. ...

  8. 练习_请使用日期时间相关的API

    练习_请使用日期时间相关的API 练习:请使用日期时间相关的APi,计算出一个人已经出生了多少天.分析:1.使用scanner类中的方法next,获取出生日期2.使用DateFormat类中的方法pa ...

  9. postgresql的mysql外部数据扩展mysql_fdw编译及安装

    下载mysql_fdw项目文件:https://pgxn.org/dist/mysql_fdw/ 注:我使用的是ubuntu18.04,可以直接在仓库查看是否有二级制安装文件,当然是有的啦,这是很方便 ...

  10. dapr本地托管的服务调用体验与Java SDK的Spring Boot整合

    1 简介 之前在文章<dapr入门与本地托管模式尝试>中介绍了dapr和本地托管,本文我们来介绍如果在代码中使用dapr的服务调用功能,并把它整合到Spring Boot中. Dapr服务 ...