flex布局：子子元素过大撑开了设定flex：1的子元素的解决方案

2019独角兽企业重金招聘Python工程师标准>>>

让p3脱离文旦流，不影响外层flex布局：
- p2设置相对定位，p3设置绝对定位
设置p2的overflow不为visible,构造BFC

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>*{margin: 0;padding: 0;}.wrapper{display: flex;width: 1000px;height: 300px;}.p1{flex: 2;border: 1px solid red;}.p2{border: 1px solid red;flex: 1;display: block;overflow: scroll;}.p3{width: 700px;height: 200px;}
</style>
<body>
<div class="wrapper"><div class="p1"></div><div class="p2"><div class="p3">256</div></div>
</div>
</body>
</html>

转载于:https://my.oschina.net/u/3407699/blog/1924700

flex布局：子子元素过大撑开了设定flex：1的子元素的解决方案相关推荐

flex布局换行间距有很大缝隙
使用flex布局换行的时候 flex-wrap: wrap; 行与行之前有很大的空隙可以使用 // align-content: flex-start;解决问题下面展示一些内联代码片. flex- ...
使用flex 布局的盒子使用 swiper轮播插件，flex布局会失效的解决方法
如上图代码所示:本来reward-list是一个弹性布局容器,子元素reward是弹性布局的.但嵌入swiper之后,reward的直接子元素就不再是reward. . 我们看下实际上的html结构: ...
flex布局实现叠在另一个div之上_CSS3 flex弹性伸缩布局[上]
本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一．布局简介 CSS3 提供一种崭新的布局方式:Flexbox 布局,即弹性伸缩布局模型(Fl ...
flex布局怎么设置子元素大小_Web前端（三）：前端布局
前端布局对前端开发而言是必不可少的环节之一.我所理解的前端布局可以分成两个大类,第一类是元素层面的布局,就是像absolute布局.flex布局等等,都是描述元素在页面上以何种形式呈现,即局部的布局: ...
30 分钟学会 Flex 布局
30 分钟学会 Flex 布局关注公众号风色年代(itfantasycc) 更多好玩的前端资料等你拿~~ 林东洲 30 分钟学会 Flex 布局 - 知乎 (zhihu.com) 为什么我要写这一 ...
CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局一栏.两栏.三栏布局一栏布局特点:页面内容居中,宽度固定实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
flex vue 垂直居中居上_移动开发-flex 布局
好好学习,天天向上主要内容为:原理理解,抽风式更新 flex 布局 1.了解 felx 布局原理传统布局兼容性好布局繁琐局限性,不能在移动端更好的布局 flex 布局操作方便,布局极为简单, ...
小程序入门到精通（三）：学小程序必备技术基础-flex布局
学小程序我们需要有点html.css.js基础,而flex布局是我们小程序常用的css布局,学习小程序之前,我们需要了解一些css方面的布局知识-Flex布局,Flex 布局将成为未来布局的首选方案 ...
一劳永逸的搞定 flex 布局
2019独角兽企业重金招聘Python工程师标准>>> 寻根溯源话布局一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候, ...

flex布局：子子元素过大撑开了设定flex：1的子元素的解决方案

flex布局：子子元素过大撑开了设定flex：1的子元素的解决方案相关推荐

最新文章

热门文章