一分钟搞定flex布局，实现上下固定，中间自适应

最新推荐文章于 2024-07-28 22:02:05 发布
最新推荐文章于 2024-07-28 22:02:05 发布
阅读量1k 收藏 2
点赞数 2
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42931285/article/details/115330088
版权

一分钟搞定flex布局，实现上下固定，中间自适应。

先上效果图：
布局

再上最重要的代码（原理在代码中写了注释）：

在这里插入图片描述
当然因为当前页面是在Vue的项目中创建的，别忘了使当前页面的高度占满整个页面，需要在.AppVue中设置100%。代码如下：

.App文件

欢迎大家讨论～

_处女座程序员的日常
关注
专栏目录
利用flex布局实现两边固定，中间自适应
weixin_51317101的博客
05-25 8048
如何利用flex布局实现两边固定，中间自适应？
上下固定中间自适应布局
华子Code1024前端菜鸟的博客
02-08 1471
上下固定中间自适应布局
flex 上下div固定, 中间div自适应
weixin_34019929的博客
06-01 1799
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{height:100%;margin: 0;
vue3 快速入门 (五) : Flex布局
最新发布
朱豪凯的博客
07-28 1675
介绍VUE3中的FLex布局
flex布局实现上下固定，中间自适应
weixin_64105376的博客
08-23 1773
主要是针对上下固定，中间自适应
VUE-flex布局之flex-wrap换行（3）
LzzMandy的博客
06-10 9060
1、外部容器display：flex； 可以设置的6个属性，如下： flex-direction 元素排列方向 flex-direction: row || row-reverse || column || column-reverse 元素排列方向: (从左往右)默认 || (从右往左) || (从上往下...
综合一
刘群智的博客
07-27 4064
自我介绍 左固定右自适应布局 这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局： <div id="outer">   <div id="sidebar" style="height:240px;">固定宽度区</div>   <d
一名运营，自学一年前端，成功入职杭州某独角兽企业，他的面试经验和学习方法等分享...
u012384510的博客
08-30 843
大家好，我是若川。这是我的微信群里小伙伴@年年 的投稿。他是19年毕业，之前做的是运营相关的工作，在我的交流群里非常活跃，自学一年前端，目前成功转行入职杭州一家独角兽企业。相信他的文章能带...
2022经典前端面试题大全 h5 +cs +js
qq_55194329的博客
10-11 1387
原型链等问题
2020前端面试的一点小技巧
Arui_0的博客
06-09 411
2020最全的前端面试指南，一个多月 1.8w 字的面试经验积累，凭借它最终成功入职大厂…… 今年的金三银四刚好赶上疫情，很多大公司都停止招聘甚至裁员，想跳槽的小伙伴被打的措手不及。 需求减少要求肯定随之提高，谨以此面经献给在如此艰难之时逆风而动、勇敢坚强的你~ 前言 今年问的难度和深度应该比前几年有所增加，下面从总体分析和重要点两个维度来分析一下： 总体分析 前端问的最多的还是 js基础、计算机网络基础等，建议在此处多下功夫。而 css 相关的很少问到，最多也就问个三栏布局、两栏布局、水平垂直居中，把前两
前端面试那些事
web前端技术交流群：457188470
09-11 1845
项目相关 自我介绍：职业经历，项目经历 选一个你觉得印象最深的项目讲一讲，然后会从项目里面切入到 web 基础（html/css/js），这一块大概会聊 20-30 分钟，所以一定要提前选好一个自己做过的得意的项目，花一点时间捋一捋你觉得项目中出色的点，用到了比较 hack，比较酷炫的方法解决了哪些痛点。 JS 基础（ES5） 原型：这里可以谈很多，只要围绕 [[ prototype ]] 谈，都...
flex-grow、flex-shrink、flex-basis
Bruce__taotao的博客
03-19 625
flex-grow、flex-shrink、flex-basis三个属性的作用： 在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。 (注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex)) 小编这里先教一下大家如何快速记住这三个属性： 首先是flex-basis，basis英文意思是<主要成分&...
CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 8151
本文用示例介绍CSS三行布局的方案。 三行布局，即：上、中、下。有两种方案：1.上下固定，中间自适应；2.中间固定，上下自适应。本文介绍第1种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局（grid) vh+calc() 表格布局（table）（不推荐） 绝对定位布局（不推荐） 上下固定，中间自适应，就意味着中间要占满。所以大部分方案中，其父元素都要设置：height: 100%
flex布局实现上下固定高度，中间自适应布局
热门推荐
sinat_31680159的博客
07-29 1万+
flex布局实现上下固定高度，中间自适应布局 flex布局在实际开发中越来越常用，实现左右宽度或者上下高度固定，中间自适应的布局的实际需求也很常见。实现起来也很简单： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>flex</title...
flex佈局之：上下，上中下，左右，左中右佈局
weixin_44763169的博客
12-08 1291
關於flex的上中下和左中右佈局技巧
Vue项目 关于flex布局（详解）
Jiang_bug的博客
03-31 9604
Flet布局 语法（Flex 指定容器 —父元素） 首先我们需要一个总盒 注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 <template> <div class="box"> <div class="item"></div> </div> </template> <style scoped> .box{ // 将box指定为Flex
vue 上下拖动 自适应布局
jqbbbbbbbbb的博客
08-31 1028
<template> <div class="DragLayoutBox" ref="box"> <div v-if="$slots.top" :style="topstyle" class="toptombox" ref="topDom"> <slot name="top"></slot> </div> <div id="line" ref="moveDom" class="dragLi.
flex实现上中下布局
qq_39851888的博客
04-20 1万+
上中下、上下布局是我们网页开发中常用的布局，下面我将用flex实现这两种布局。 上中下布局 特点： 头尾固定，内容自适应 思路： 整个盒子为layout，使用flex纵向排列，宽高为100%；header和footer均为flex-shrink: 0;，强制不缩放。main的flex-grow: 2;，默认放大，且自动滚动。经过以上操作，就实现了经典是上中下布局。 布局 <div id="layout"> <header id="header">这里是头部</heade
上下固定，中间自适应，超出显示滚动条 flex布局
weixin_42323457的博客
08-08 3748
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{ ...
flex实现三栏布局中间自适应
07-28
这是一个关于使用Flex实现圣杯布局的问题。 圣杯布局的要求是：全局纵向分成三部分：头部、尾部高度固定，中间自动；宽度都为100%；中间被拆分为三栏：左右宽度固定，中间自动。 中间自动会被拆分为三栏，左右宽度...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值