flex布局嵌套之高度自适应
查遍各大资源无任何flex嵌套布局的例子,经过自己折腾完成了项目中的高度自适应需求(更多应用于前端组件)
效果图:
html代码:(关键地方已经用颜色特别标识 ^_^)
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>flex 嵌套 之 高度自适应</title>
<style media="screen">
body, html {
height: 90%;
}
.flex {
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.item {
flex: auto;
}
.overflow {
overflow: auto;
}
.outer {
height: 70%;
border: 1px solid silver;
}
.contener {
background: pink;
border: 1px solid silver;
}
.contener>div{
padding: 5px;
}
</style>
</head> <body>
<h1>flex 嵌套布局</h1>
<div class="flex outer">
<div style="background-color: silver; padding: 10px;">外容器 自适应内容的区域 ... ...</div>
<div class="flex item overflow" style="padding: 15px;"> <!-- 嵌套的item加flex样式 及 overflow: auto属性 -->
<div class="flex contener overflow"> <!-- overflow: auto 高度自适应必须 -->
<div style="background-color: yellow;">
<h3>内容器 - 头部信息</h3>
</div>
<div class="item overflow"> <!-- overflow: auto 高度自适应必须 -->
内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>
内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>
内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>
</div>
<div style="background-color: yellow;">
<h3>内容器 - 尾部信息</h3>
</div>
</div>
</div>
</div> </body> </html>
总结:
flex布局嵌套的关键,就是对item进行容器定位,赋予flex特性。
flex知识学习小游戏: https://flexboxfroggy.com/
flex布局嵌套之高度自适应的更多相关文章
- flex 布局 input 宽度不自适应
flex 布局 input 宽度不自适应 解决方法: 给 input 加上min-height 解决!
- flex布局 一侧固定宽度 一侧自适应
想实现一个类似知乎个人主页的资料显示布局 类是下面这样 其中显示图片在一个div,Name和class和button在一个div中,使用justify-content: space-between; ...
- 使用flex布局解决百分比高度元素垂直居中
方法一: align-self(解决父元素下面单个子元素布局方式) 父级加上 div{display:flex} 子元素 span { flex-grow: 1; align-self: center ...
- vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)
<template> <div class="card-index pt-relative"> <div id="wrapper ...
- sticky footer 和 flex布局的原理
Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送. 一.使用f ...
- 典型的DIV CSS三行二列居中高度自适应布局
如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...
- RecyclerFullyManagerDemo【ScrollView里嵌套Recycleview的自适应高度功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对于Recyclerview自己的LinearLayoutManager和GridLayoutManager,在版本23.2.0之后 ...
- [Swift通天遁地]二、表格表单-(3)在表格中嵌套另一个表格并使Cell的高度自适应
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- css--常见左右盒子高度自适应布局
前言 前端开发工程师最基础的技能要求是根据 ui 设计稿还原网页,这就缺少不了必要的网页布局,首先看下最近小伙伴问我的一个问题,他说一个网页有左右两个部分,左右两个部分的高度都不固定,要使得右部分的宽 ...
随机推荐
- 监控linux服务器是否能登陆 邮件报警
import smtplibfrom email.mime.text import MIMETextimport telnetlibimport timedef SendEmail(fromAdd,t ...
- fdisk 分区及 swap
使用虚拟机创建挂载点 一,创建 windows 硬盘 创建
- asp.net core结合docker实现自动化获取源码、部署、更新
之前入坑dotnet core,由于一开始就遇到在windows上编译发布的web无法直接放到centos上执行.之后便直接研究docker,实现在容器中编译发布.然后就越玩越大,后来利用git的ho ...
- 使用Java的URL/HttpURLConnection进行远程调用(POST请求)
利用Java的HttpURLConnection进行远程url请求(调用远程接口) 测试类:请求类型为json,以post方式请求,利用OutputStream写入数据 实体类: public cla ...
- pyqt5 -——菜单和工具栏
一. 状态栏 # -*- coding: utf-8 -*-# @Time : 2018/12/22 12:37# @Author : Bo# @Email : mat_wu@163.com# @Fi ...
- C#调用C++的DLL 尝试写入受保护的内存
原因:C#中的声明函数的参数类型与C++的函数的参数类型不一致,在参照C#与C++的参数类型对照表以后,修改相应参数类型,问题解决
- ubuntu环境下安装docker遇到的坑
ubuntu安装docker的前提条件是: 1. Linux 的内核版本在 3.10 或以上: 2. linux 内核要开启 cgroup 和 namespace 功能 可以执行命令:uname –a ...
- Jenkins问题笔记
1.启动docker容器权限不足 通过如下命令启动docker容器后,使用命令"docker logs -f jenkins"查看jenkins容器日志, docker run - ...
- ipad忘记了锁屏密码,已经越狱了
ipad忘记了锁屏密码,已经越狱了, 已经需要连接itunes了...要是恢复的话,好像就不能越狱了耶... 我叫什么好咧 | 浏览 3330 次 问题暂时关闭 推荐于2016-07-23 11: ...
- ActionScript3.0(AS3)中的泛型数组Vector
Adobe官方并没有"泛型数组"的叫法,这是我自己对Vector的叫法(有点标题党),不过Vector在使用上确实跟c#中的泛型数组有些相似之处. 原作者:菩提树下的杨过出处:ht ...