三种方式实现双飞翼布局_flex实现双飞翼布局-程序员宅基地

技术标签: css  Powered by 金山文档  html  javascript  

  1. flex实现双飞翼布局

1、给中部父盒子设置宽度100%设置display:flex;,

2、给左侧和右侧盒子设置固定的宽度,高度固定值

3、中间的盒子设置flex-grow: 1;,宽度不设置,高度固定值

4、头部和底部设置宽度100%,高度固定值

代码部分:

.flex {
            width: 100%;
            display: flex;
            text-align: center;
        }

        .left {
            height: 400px;
            width: 200px;
            text-align: center;
            background-color: blue;
        }

        .right {
            height: 400px;
            width: 200px;
            text-align: center;
            background-color: blue;
        }

        .center {
            flex-grow: 1;
            height: 400px;
            text-align: center;
            background-color: aqua;
     
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Zac_123456/article/details/128488742

智能推荐

CUPS-centos6-docker实践_docker cups-程序员宅基地

文章浏览阅读1.3k次。针对开源网络打印机软件CUPS的容器化实践创建一个目录,并在目录内建立一个文件名为Dockerfile的文件和文件名为cupsd.conf的配置文件Dockerfile#使用原始镜像FROM centos:6#作者MAINTAINER shark1985#使用阿里云yum源RUN curl -o /etc/yum.repos.d/CentOS-Base.repo http:..._docker cups

Leetcode 89. 格雷编码(DAY 106) ---- 回溯算法学习期(后天考大物 今天开始预习)_后天考试 今天预习-程序员宅基地

文章浏览阅读117次。原题题目代码实现(首刷自解)class Solution {public: bool backtracking(vector<int>& ret,vector<bool>& visit,int num,int n) { visit[num] = true; ret.emplace_back(num); if(ret.size() == visit.size()) return true;_后天考试 今天预习

计算机应用基础客观答案,计算机应用基础作业一(答案)-程序员宅基地

文章浏览阅读401次。2012下半年计算机应用基础作业一一、单选题(共40题,每题1分)1、在第三代计算机期间内按规模和性能产生了______。A:包含笔记本电脑在内的序列机B:包含微型机在内的序列机C:大、中、小和微型机D:巨、大、中和小型机答案:D2、既可以接收、处理和输出模拟量,也可以接收、处理和输出数字量的计算机是______。 A:电子数字计算机 B:电子模拟计算机 C:数模混合计算机 D:专用计算机..._接收、处理和输出模拟量

python中的库有什么作用,python库在哪个文件夹_python中导入的库有什么用-程序员宅基地

文章浏览阅读801次,点赞16次,收藏21次。嗨喽,大家好呀~这里是爱看美女的茜茜呐又到了学Python时刻~随着大数据和人工智能的发展,Python也与多种科技深深绑定。比如自动化测试,运维,爬虫,数据分析,机器学习,金融领域,后端开发,云计算,游戏开发都有涉及python画笑脸的源代码。万丈高楼平地起,Python这座大厦能够如此强大,就是拥有强大的成千上万的库的支持无数牛x的轮子在支持这座大厦,今天我们来一起梳理一下,俯瞰整个Python宝库。那么什么是库呢?从代码角度讲:库就是一堆类(class)和函数(function)的集合。_python中导入的库有什么用

springMvc 的三种url映射处理器的实现-程序员宅基地

文章浏览阅读191次。为什么80%的码农都做不了架构师?>>> ..._spring mvc通过filter实现url映射

解决 Splunk windows数据接入奇葩问题_windows日志无法自动转发到splunk-程序员宅基地

文章浏览阅读946次。Splunk 对app 下面的inputs.conf 文件到 监控路径有严格的要求。_windows日志无法自动转发到splunk

随便推点

树状数组-程序员宅基地

文章浏览阅读118次。树状数组学习笔记

【报告分享】抖音蓝V账号定位及外化罗盘.pdf(附下载链接)-程序员宅基地

文章浏览阅读775次。今天给大家分享的报告是字节跳动营销创业中心于2019年11月份发布的《抖音蓝V账号定位及外化罗盘.pdf》,报告从账号定位、内容表现形式/试错、内容深耕与延展等方..._抖音规则外化

php 实现简拼-程序员宅基地

文章浏览阅读283次。<blockquote>model:::::::::::::::::::::::::::::function getFirstCharter($str){if(empty($str)){return '';}$fchar=ord($str{0});if ($fchar &gt;= 1 &amp;&amp; $fchar &lt;= 222) retu..._php 汉子转简拼代码

51Nod - 1765 期望推导_51nod1765-程序员宅基地

文章浏览阅读751次。题意:题目链接:https://www.51nod.com/onlineJudge/submitDetail.html#!judgeId=223971 每次生成一个[0,n)的随机数,如果这个随机数和给出的m个数字中的其中一个数字相等,那么就停止生成随机数,否则继续生成,求出所有生成的数的和的期望。思路:求期望的一种套路,可以列出一个关于期望E的方程,然后求解方程得出E的表达式。 对这道题来说,_51nod1765

《系统架构设计师教程(第2版)》第6章-数据库设计基础知识-05-NoSQL数据库-程序员宅基地

文章浏览阅读860次,点赞6次,收藏11次。《系统架构设计师教程(第2版)》笔记,第6章-数据库设计基础知识-05-NoSQL数据库

学习Oracle数据库入门到精通教程资料合集-程序员宅基地

文章浏览阅读173次。学习Oracle数据库入门到精通教程资料合集 原文地址:学习Oracle数据库入门到精通教程资料合集 作者:xuerong_wei 任何大型信息系统,都需要有数据库管理系统作为支撑。其中,Oracle以其卓越的性能获得了广泛的应用。本合集汇总了学习Oracle数据库从入门到精通的30份教程资料。资料名称下载地址超详细Oracle教程【PDF版电子..._oracle经典教程 pdf

推荐文章

热门文章

相关标签