三种方式实现双飞翼布局_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

智能推荐

Git学习系列(一)初识Git-程序员宅基地

文章浏览阅读718次。Git作为一个版本控制工具,在工作中我们常常会用到它,尤其是在移动开发中,Git可谓是版本管理神器。下面让我们来认识一下Git:Git是一个分布式版本控制软件,它是由Linux的作者Linus用C写的一个分布式版本控制系统。如果大家对Git的历史比较感兴趣,可以点击链接进入官网了解:A Short History of GitGit主要特点有如下:1、速度:Git在本地上保存着所有

餐饮行业怎么才能玩转大数据?-程序员宅基地

文章浏览阅读154次。编者按:用数据将传统餐饮门店信息搬到线上,大众点评兴起;以数据化为基础,餐饮门店经营实现移动化,点单、叫号、排队模式火了。目前,餐饮行业的数据应用更多在供应链管理和餐饮门店运营状况实时监控分析,每个餐饮商家各自为战,实际数据的应用比大数据的应用更多,而大数据更多用于用户画像和少数大企业的经营管理。不过,基于大数据在电商的应用和餐饮的发展趋势,大数据的应..._如何获得每个城市的餐饮大数据

Dialog异常 Unable to add window, token not valid_token not valid-程序员宅基地

文章浏览阅读584次。好记性不如烂笔头问题描述 Activity 延时显示 Dialog ,在显示之前, Activity 已经销毁 报错 Unable to add window -- token android.os.BinderProxy@e6ee7d8 is not valid; is your activity running?问题分析 错误信息很明确,是没有 token 导致的. 而 toke_token not valid

基于SSH框架的电影订票系统网站的设计与实现-程序员宅基地

文章浏览阅读3.9k次。源码及论文:源码及论文下载:http://www.byamd.xyz/tag/java/开发计划1. 甘特图2. 开发计划简述如图所示在项目初期阶段,首先开始需求调研。需求调研阶段,我们将首先根据初期的会议内容考虑市场需求以及基本的市场现状,并根据以上的内容设计问卷来寻找痛点。我们准备使用第三方问卷工具,以电子问卷的方式来进行调查。初步预计会收到200份问卷。在需求调查阶段,同时开展对同类型的网站的评估工作。进入初步的需求分析阶段。目标是取得现有电影购票网站的基本购票流程,并对其交互等

异常的捕获和处理-程序员宅基地

文章浏览阅读3k次。异常的处理

ASP.NET Core微服务实战系列-程序员宅基地

文章浏览阅读510次。ASP.NET Core微服务实战系列 原文:ASP.NET Core微服务实战系列  希望给你3-5分钟的碎片化学习,可能是坐地铁、等公交,积少成多,水滴石穿,码字辛苦,如果你吃了蛋觉得味道不错,希望点个赞,谢谢关注。前言  这里记录的是个人奋斗和成长的地方,该篇只是一个系列目录和构想,并没有完全真正开弓。之所以有这个题目,是..._微服务 asp.net core

随便推点

基于功能安全的车载计算平台开发:硬件层面_mcu 不同通道 共因-程序员宅基地

文章浏览阅读537次,点赞18次,收藏6次。如果不具备关于复杂元器件的安全故障比例的详细信息,可假定安全故障的保守比例为50%,并假定通过内部自检和外部看门狗(表中的安全机制SM4)达到对违背安全目标的总体覆盖率为90%。这里的意图不是一定需要全面的分析,比如要求对于微控制器内或者来自于一个复杂的PCB板上任何理论可能的信号组合的桥接故障进行详尽的分析。根据硬件故障对安全目标产生影响的不同,硬件故障可分为安全相关故障与非安全相关故障,其中安全相关故障又进一步分为单点故障、残余故障、多点可探测故障、多点可感知故障、多点潜伏故障与安全故障。

VS2022无法启动程序(系统找不到制定的文件)问题_vs2022无法启动程序找不到指定文件-程序员宅基地

文章浏览阅读3.1w次,点赞47次,收藏108次。如何解决VS2022无法启动程序(系统找不到制定的文件)的问题。_vs2022无法启动程序找不到指定文件

Chapter4 The Relational Model_order pairs and cartesian product-程序员宅基地

文章浏览阅读756次。Chapter4 The Relational Model4.2TerminologyAn relational model is based on the mathematical concept of a relation,whichis phycisally represented as a table.4.2.1Relational Data Structurewe d_order pairs and cartesian product

java检查手机号是否被注册_【java】如何开发一个检测手机号注册过哪些网站的应用?...-程序员宅基地

文章浏览阅读707次。问题描述使用python或其它语言开发一个检测手机号注册过哪些网站的应用问题出现的环境背景及自己尝试过哪些方法在登陆一个很久没使用的网站时,原注册的手机号已弃用无法找回密码。所以希望有这么一款应用,能够在我输入手机号时列出注册过的网站,方便更换注册账号用的手机号目前的思路是,使用爬虫爬到网站中忘记密码的页面,然后输入手机号。这么做有几个问题:爬取忘记密码页面的通用规则该用什么思路去写关于验证码,我..._java 导入验证手机号是否注册某个网站

Android 插件化-程序员宅基地

文章浏览阅读3.3k次。1.插件化插件可以理解为免安装的Apk,而支持插件的app称为宿主。在Android系统中,应用是以Apk的形式存在的,应用都需要安装才能使用。实际上Android系统安装应用的方式相当简单,就是把应用Apk拷贝到系统不同的目录下,然后把so解压出来而已。常见的应用安装目录有:/system/app:系统应用/system/priv-app:系统应用/data/app:用户应用一个Apk会包含如下几个部分:classes.dex:Java代码字节码res:资源文件._android 插件化

最新阿里内推 Java 后端面试题_索引会不会使插入、删除作效率变低,怎么解决?-程序员宅基地

文章浏览阅读80次。【这里想说,因为自己也走了很多弯路过来的,所以才下定决心整理,收集过程虽不易,但想到能帮助到一部分想成为Java架构师或者是想职业提升P6-P7-P8的人,心里也是甜的!有需要的伙伴请点㊦方】↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓。数据库隔离级别,每层级别分别用什么方法实现,三级封锁协议,共享锁排它锁,mvcc 多版本并发控制协议,间隙锁。数据库表怎么设计的?_索引会不会使插入、删除作效率变低,怎么解决?