box-flex 弹性合布局+WebApp布局自适应
问：随着屏幕改变，中间自适应 两边固定宽度？
参考:
问：左侧导航栏隐藏后，右侧内容宽度自动（响应式）变大？
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0 ;padding: 0;
}
div {
display: -moz-box;
display: -webkit-box;
display: box;
width: 100%;
}
#p1 {
-moz-box-flex: 1.0;
-webkit-box-flex: 1.0;
background: red;
height: 500px;
}
#p2 {
-moz-box-flex: 8.0;
-webkit-box-flex: 8.0;
box-flex: 8.0;
background: blue;
height: 100px;
margin: 0 20px;
}
</style>
</head>
<body>
<div>
<p id="p1">Hello</p>
<p id="p2">W3School</p>
</div>
<p><b>注释：</b>IE 不支持 box-flex 属性。</p>
</body>
</html>
参考:
纯属个人观点,仅供参考！
box-flex 弹性合布局+WebApp布局自适应的更多相关文章
- flex 弹性合模型
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- box flex 弹性盒模型（转载）
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
- 网页布局——Flex弹性框布局
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 需要安卓4.4及以上版本可以使用 ...
- 【flex弹性盒布局】------这个强大的功能
你知道flex弹性布局么? 我们先来了解它的概念:Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 ...
- flex弹性布局学习
一.介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: ...
- 记一下flex弹性布局
flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...
- flex弹性布局学习总结
本文首次发布在我的个人博客:Claiyre的个人博客 https://claiyre.github.io/ 博客园地址:http://www.cnblogs.com/nuannuan7362/如需转载 ...
- flex弹性布局的基本介绍
最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
随机推荐
- mysql启动失败又一例
搭的wordpress报错: 后台用的mysql,之前也崩过,原因是虚拟内存耗尽,通过增加swap空间最终让数据重新启动. 但仅过一晚上,数据库再次崩溃.看来要查一查是什么程序耗尽资源. 执行top, ...
- [HDFS_4] HDFS 的 Java 应用开发
0. 说明 在 IDEA下 进行 HDFS 的 Java 应用开发 通过编写代码实现对 HDFS 的增删改查操作 1. 流程 1.1 在项目下新建 Moudle 略 1.2 为 Moudle 添加 M ...
- 基于LNMP(fastcgi协议)环境部署、原理介绍以及fastcgi_cache配置以及upstream模块负载均衡讲解
ngx_http_proxy_module只能反向代理后端使用HTTP协议的主机.而ngx_http_fastcgi_module只能反向代理后端使用FPM或者使用FastCGI协议的客户端. 一.部 ...
- zookeeper-03 命令行操作
1. 前言 在3台机器分别部署了zookeeper-3.4.5,本文操作是在此基础上进行的.部署详情参见上一篇文章 2. 客户端登录与帮助查看 # 由于是集群模式,所以可以在3台机器的其中任意一台进行 ...
- log4.net 配置-控制台输出带颜色的日志
一般对控制台输入的日志我们使用的 Appender 为 ConsoleAppender ,日志为白色文字. 当我们想到 DEBUG,INFO,WARN,ERROR 每种日志设置一种颜色时我们需要将 ...
- Android实践--apk反编译
版权声明:本文为博主原创文章.转载请注明出处. https://blog.csdn.net/ysjian_pingcx/article/details/25468867 Android apk反编译一 ...
- JDBC驱动-MySQL
<dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</a ...
- JS进阶之---执行上下文，变量对象，变量提升
一.结构顺序大体介绍 JavaScript代码的整个执行过程,分为两个阶段,代码编译阶段与代码执行阶段. 编译阶段由编译器完成,将代码翻译成可执行代码,这个阶段作用域规则会确定. 执行阶段由引擎完成, ...
- Elasticsearch 数据搜索篇·【入门级干货】===转
ES即简单又复杂,你可以快速的实现全文检索,又需要了解复杂的REST API.本篇就通过一些简单的搜索命令,帮助你理解ES的相关应用.虽然不能让你理解ES的原理设计,但是可以帮助你理解ES,探寻更多的 ...
- "system:serviceaccount:rook-ceph-system:rook-ceph-system" cannot get pods/log in the namespace "rook-ceph"
1.kubectl logs -f rook-ceph-operator-86776bbc44-cv5hs -n rook-ceph-system 日志:E | op-cluster: unk ...