flex上中下三栏布局【遗留问题】

最新推荐文章于 2024-04-18 16:38:13 发布
最新推荐文章于 2024-04-18 16:38:13 发布
阅读量1.6k 收藏
点赞数
分类专栏： flex布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26239917/article/details/88938620
版权

overflow-x:hidden overflow-y:scroll flex-grow:1 flex-basis:0/0%
head h:1rem
在这里插入图片描述

overflow-x:hidden overflow-y:scroll flex-basis:0/0%
head h:1rem
在这里插入图片描述

overflow-x:hidden overflow-y:scroll
head h:1rem 高度为什么缩小？
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../网易云/css/diy-default.css">
		<link rel="stylesheet" href="../网易云/css/resetm.css">
		<style>
			body{
				/* background-color: #00FF7F; */
			}
			header{
				width: 100%;
				height: 1rem;
				background-color: #808080;
			}
			footer{
				width: 100%;
				height: 1rem;
				background-color: #808080;
			}
			footer div{
				padding-top: .5rem;
				height: .5rem;
				background-color: #ADFF2F;
			}
			section{
				flex-grow: 1;
				flex-basis: 0%;
			}
		</style>
	</head>
	<body>
		<div class="flex-box fthreeBox">
			<header></header>
			<section class="fthreeMid">
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				xxx<br>
				
			</section>
			<footer>
				<div></div>
			</footer>
		</div>
	</body>
</html>

解答

overflow-y内容会挤占其他元素位置
flex默认0 1 auto
flex-grow:0默认索取剩余空间，默认值为0
flex-shrink ：1超出压缩比例，默认值为1
flex-basis:autoitem自动分配长度
flex-basis：0/0%长度为0

flex-basis:auto 此时为auto

在这里插入图片描述

| flex-basis：0/0% | 长度为0 |

在这里插入图片描述

|flex-grow:1 |默认索取剩余空间 |

| flex-basis：0/0% | 长度为0 |

在这里插入图片描述

-------------------------------------------------------------

总结：

情况一：.fthreeMid什么也不写，宽度默认为flex-basis:auto 自动分配，会挤占左右两侧长度在这里插入图片描述

情况二：.fthreeMid 加上 overflw xy

overflow-x: hidden;
overflow-y: scroll;

左右两侧还剩余一点点空间

在这里插入图片描述

情况三：.fthreeMid 加上 overflw xy 再加上 flex-grow:1

在这里插入图片描述

    overflow-x: hidden;
    overflow-y: scroll;
    flex-grow: 1;

无变化

情况四：.fthreeMid 加上 overflw xy 再加上 flex-grow:1，再加上felx-basis:0/0%,达到预期效果，既不挤占同级盒子元素宽高，又能实现滑动效果

在这里插入图片描述

Fade Away
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex实现三栏布局原理
liuzijiang1123的专栏
05-16 1万+
&amp;amp;lt;style&amp;amp;gt; .flex-box{ display: flex; height:200px; width:100%; background:red; } .item:nth-child(2){ flex:1; background:red; } &amp;amp;l...
上中下三栏布局
weixin_30840253的博客
02-27 362
上下栏高度固定，中间栏高度自适应的三栏布局。其中底部始终在页面最底。示意图如下： 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xm...
Flex布局详解
最新发布
~~~的博客
04-18 632
可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等于strech。它的默认值为auto，即项目的本来大小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为 0 1 auto后两个属性可选。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
三栏布局
Web前端——成长之路
03-09 326
圣杯布局：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
flex实现三栏布局
m0_47342482的博客
04-15 1559
flex实现三栏布局，两边固定，中间宽度自适应 效果图 html部分 <div class="outer"> <div class="right"></div> <div class="center"></div> <div class="left"></div> </div> CSS部分 .outer{ display: flex; height: 100%;
flex实现三栏等分布局
weixin_30497527的博客
11-01 1249
前言 在实际开发中，我们经常会想要实现的一种布局方式就是三栏等分布局，那么我们如何来解决这个问题呢？ 解决 方法一：flex 外层容器也就是ul设置display:flex，对项目也就是li设置flex：auto，代表 flex: 1 1 auto <style> * { list-style: none; ...
移动端优先的flex三栏布局的使用方法
09-22
felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用... 这篇文章主要介绍了移动端优先的flex三栏布局的使用方法，感兴趣的小伙伴们可以参考一下
flex布局实现上下固定中间滑动的布局方式
11-20
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下: 例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动...
css3弹性盒子flex实现三栏布局的实现
01-22
用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会...
三列式样式表，三栏布局技巧
08-20
三栏布局技巧，采用flex-grow-shrink等属性，超极简单好用。
css 三栏布局 圣杯布局 双飞翼 flex
wangjun5159的专栏
12-10 2186
前言三栏布局是常见的布局方式，应用场景：左、右两侧是定宽的导航栏，中间内容自适应。在参考了详解 CSS 七种三栏布局技巧 后，我对三栏布局有了更深刻的认识，本文是我对上文的解读，是自己消化理解的过程，此文是为了加深理解知识而写，希望可以帮到你。 示意图 简单的实现方式（流式布局和BFC三栏布局）实现三栏布局，我们可以采用比较简单的实现方式，也就是详解 CSS 七种三栏布局技巧提到的流式布局和BF
CSS布局实例:上中下三行,中间自适应
09-27
上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。 　　firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。 　　对于非ie内核浏览器，通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形
display：flex布局
weixin_40544688的博客
08-20 313
关于flex布局，我觉得它在布局里简直就是一匹黑马，不愧为弹性布局 阮一峰大神有一篇博客，讲的超级详细 （http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）地址献上.... 下面来举例一下 我平时是什么场合派它上战场 1、左右居中 HTML &lt;div class="wrapper"&gt; &lt;d...
CSS中的flax布局
weixin_42691967的博客
08-20 1562
记录学习一下CSS中的flax布局。 flax是什么，全称叫弹性盒子， 有两个核心概念： flax container 和 flax item。 初识flax: 为什么这三个小方块不在一行显示呢？ 答： 因为div（小程序中的view）元素都是块级元素，而块级元素默认情况下，不管宽高是多少都是占一行显示的。 怎么将这三个小方块放在一行呢？ 答： 有块级元素，就有行内元素，只需要将这三个元素的display属性设置为 inline即可。但是，行内元素不能设置元素的宽高。 那怎么才能设置行内元素的宽高呢？
display:flex布局实现 上面两个，下面三个的布局
impossible1994727的博客
01-07 2360
布局如上图。 html 部分： <view class="cardList flex"> <view class="cardList_item" v-for="(item,index) in 5" :key="index"> <view>{{item}}</view> </view> </view> css 部分： .cardL...
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上下布局
SCUhzs
12-13 6332
[前端面试题]flex上下布局
用flex实现三栏布局
weixin_46369590的博客
03-28 2508
上述代码中，.container是一个flex容器，flex-wrap属性设置为wrap以使其在需要时换行。justify-content属性设置为space-between以使三个栏目之间有一定的空隙。align-items属性设置为。CSS三栏布局是指将一个网页分为三个栏位，分别为左栏、中栏和右栏。左栏和右栏使用flex-basis属性设置宽度，中栏使用。三个栏目的背景颜色可以根据实际情况进行调整。以使三个栏目的高度相等。
三栏布局的几种实现方式
Kotlin0139的博客
07-29 3361
三栏布局是一种经典的页面布局：在网页上以平铺方式展现的左中右三列布局，其特点在于，左右两列可固定在网页两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化（简单来说就是两端固定，中间自适应）...
css flex上中下三栏布局
08-18
CSS的Flex布局（Flexbox）是一种强大的布局模型，能够轻松实现灵活的页面布局。它提供了一种简单直观的方式来对容器中的子元素进行排列、对齐和分布。 要使用Flex布局，首先需要将容器元素的display属性设置为flex...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值