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. Potree 001 Potree介绍

    1.Potree是什么 Potree是一种基于WebGL的点云数据可视化解决方案,包含点云数据转化,以及进行可视化的源码.该解决方案的主要优势在于对点云数据进行了多尺度的管理,在数据传输和可视化上都做 ...

  2. [编程基础] C++多线程入门7-条件变量介绍

    原始C++标准仅支持单线程编程.新的C++标准(称为C++11或C++0x)于2011年发布.在C++11中,引入了新的线程库.因此运行本文程序需要C++至少符合C++11标准. 文章目录 7 条件变 ...

  3. [IOI2016] shortcut

    有显然的 \(O(n^3)\) 做法,可以获得 \(38pts\).(退火在洛谷上能跑 \(75pts\)) 答案具有单调性,考虑二分一个 \(M\) 并判断.列出 \(i\) 到 \(j\) 的距离 ...

  4. AspNetCore管道

    title: Asp.Net Core底层源码剖析(一)中间件/管道 categories: 后端 tags: - .NET 当我们像下面这样添加一个管道时发生了什么? app.Use(async ( ...

  5. [WPF]使用Fody提高效率

    下载安装及使用 代码实例 public class Person:INotifyPropertyChanged { public event PropertyChangedEventHandler P ...

  6. （20）go-micro微服务Elasticsearch使用

    目录 一 Elasticsearch介绍 二 Elasticsearch的主要功能及应用场景 1.Elasticsearch 主要具有如下功能: 2.Elasticsearch 的主要应用场景如下: ...

  7. mysql 简单查询

    查询特定列SELECT ename,birthday FROM emp; 查询所有的select*from emp; 给列起别名select ename AS 姓名, salary AS 工资 FRO ...

  8. 使用 NineData 高效编写 SQL

    SQL 是 Structured Query Language 的缩写,中文翻译为"结构化查询语言".它是关系型数据库的标准语言,所有的关系型数据库管理系统(RDBMS),比如 M ...

  9. 12月2日内容总结——边框属性，display属性，css盒子模型，浮动、溢出、定位、z-index属性和建议博客页面搭建

    目录 一.边框 边框简介 border-style--边框样式 border-width--边框宽度 border-color--边框颜色 二.display属性 三.CSS盒子模型 概念 margi ...

  10. 【LeetCode字符串#05】基于个人理解的KMP算法图解，以及应用到strStr()函数实现

    KMP算法(用于实现 strStr()) strStr()函数是用来在一个字符串中搜索是否存在另一个字符串的函数,其匹配字符串方式为KMP算法 KMP算法基础理论 假设有如下两个字符串 文本串 aab ...