精选文章 flex 子元素占满剩余高度 与 flex:1 的子元素 overflow:hidden 失效

flex 子元素占满剩余高度 与 flex:1 的子元素 overflow:hidden 失效

作者:Ray_1234567 时间: 2019-11-05 10:11:08
Ray_1234567 2019-11-05 10:11:08

这几天使用flex开发大屏,遇到一个印象比较深的问题就是flex的子元素,在其他兄弟元素的高度不定的情况下,如何占满父元素的剩余空间?

效果图:

flex 子元素占满剩余高度 与 flex:1 的子元素 overflow:hidden 失效1

flex 子元素占满剩余高度 与 flex:1 的子元素 overflow:hidden 失效2

要点就是:

1、父元素要设置 display: flex;

2、父元素的主轴方向设置为从上到下 flex-direction: column; 

3、父元素的高度能确定,不管是定高(height: 500px;),还是 100% 其父元素的高度

4、需要占满剩余高度的子元素,设置 flex:1; 或者 flex-grow:1;

因为  ( flex:1; ) ==  ( flex: 1 1 0%; ) == ( flex-grow:1;flex-shrink:1; flex-basis:0%;)  == (父控件有剩余空间占1份放大,父控件空间不足按1缩小,自身的空间大小是0%)

如果你对另外两个属性要要求可以另外设置。

下面是测试的代码:




	
	Document
	


	
我的高度不定
我要占满father的剩余高度

当然了,其实联想一下,就会发现,上面的方法应对 占满剩余宽度也是可行的,这个就看各位看官如何变通了,我就不再赘述了。

-----------------------------------------------------------------------分割线-------------------------------------------------------------

接下说说在flex:1 的子元素 overflow:hidden 失效的问题,这个问题 出现在当 flex父元素高度不足时,会被子元素撑开高度,这不是我们想要的,解决方法:

min-width: 0 或者 min-height: 0 

width: 0 或者 height: 0 

上面的方法都是可行的。

 

 

 

 

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:PCA

下一篇:spring mvc学习(2):spring jar包下载

您可能感兴趣

  • 剖析一些经典的CSS布局问题,一心只为为前端开发

    一、让一个元素水平垂直居中,到底有多少种方案? 水平居中 对于行内元素: text-align: center; 对于确定宽度的块级元素: width和margin实现。margin: 0 auto; 绝对定位和margin-left: -width/2, 前提是父元素position: relative 对于宽度未知的块级元素 table标签配合margin左右auto实现水平居中。使用t...

  • web面试题大全

    $HTML, HTTP,web综合问题 常见排序算法的时间复杂度,空间复杂度 前端需要注意哪些SEO web开发中会话跟踪的方法有哪些 的title和alt有什么区别 doctype是什么,举例常见doctype及特点 HTML全局属性(global attribute)有哪些 什么是web语义化,有什么好处 HTTP method 从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)...

  • 前端知识点整理收集(不定时更新~)二

    目录 require() 加载文件机制 线程和进程 线程 单线程 Nodejs的线程与进程 网络模型 初识 TCP 协议 三次握手 I/O I/O 先修知识 阻塞与非阻塞 I/O 同步与异步 I/O Git 基础命令 分支操作 修改远程仓库地址 远程分支获取最新的版本到本地 拉取远程仓库指定分支到本地 SEO优化 优化策略 SEO实战 TDK优化 页面内容优化 使用html5结构 唯一的H1...

  • 一文详解主流CSS布局

    如不允许转载,可留言,我将在看到后的24h内删除。 一、水平居中布局   水平居中布局主要有三种实现方式:   ● inline-block + text-align 属性配合使用   ● table + margin 属性配合使用   ● absolute + transform 属性配合使用 1. inline-block + text-align   原理:   text-align属...

  • 2017前端面试题总结

    1:为何选择前端这个方向和对前端的理解 为什么: 第一的话就是对前端很感兴趣,之前也接触过其他的语言,但是直到接触到前端才发现真的有兴趣做下去,兴趣是一个人最好的老师, 第二的话前端很有前途,像现在nodejs,rn,微信小程序这类工具和框架可以让前端进行后端和移动开发,所以我觉得前端的前途会更多一点。 理解: 首先前端工程师最核心的技能还是:Html、CSS、JS。前端负责的是用户可以看到...

  • 几种常见的 CSS 布局

    几种常见的 CSS 布局 本文概要 本文将介绍如下几种常见的布局: 单列布局 两列自适应布局 圣飞布局和双飞翼布局 伪等高布局 粘连布局 一、单列布局 常见的单列布局有两种: header,content和footer等宽的单列布局 header与footer等宽,content略窄的单列布局 1.如何实现 对于第一种,先通过对header,content,footer统一设置width:1...

  • Flex 布局语法教程

    Flex 布局语法教程 https://www.runoob.com/w3cnote/flex-grammar.html 网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案—-Flex布局,可...

  • Flex 布局教程:语法篇

    网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。