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 ...
随机推荐
- 用Python实现数据结构之链表
链表 链表与栈,队列不一样,它是由一个个节点构成的,每个节点存储着本身的一些信息,也存储着其他一个或多个节点的引用,可以从一个节点找到其他的节点,节点与节点之间就像是有链连在一起一样,这种数据结构就叫 ...
- 使用parted创建gpt大分区例子
[root@VM000000518 ~]# parted /dev/xvde GNU Parted 2.1 Using /dev/xvde Welcome to GNU Parted! Type 'h ...
- Django电商项目---完成注册页面和用户登录day1
完成基本的创建项目.用户注册.登录.注销功能 创建Django项目,创建df_user的App 创建静态文件夹static(跟manage.py保持在同一级别下) 复制静态文件(css + image ...
- Kubernetes 核心概念
什么是Kubernetes? Kubernetes(k8s)是自动化容器操作的开源平台,这些操作包括部署,调度和节点集群间扩展.如果你曾经用过Docker容器技术部署容器,那么可以将Docker看成K ...
- web高并发的解决方案
我们先了解一下什么是并发和并行 并发:并发是指两个或多个事件在同一时间间隔内发生,就是可以重叠在时间段启动,并发是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机 ...
- 17秋 软件工程 第六次作业 Beta冲刺 Scrum2
17秋 软件工程 第六次作业 Beta冲刺 Scrum2 我们组转会成员:杰麟: 我们组新成员:宏庆. 各个成员冲刺期间完成的任务 世强:完成分页功能的演示: 陈翔:完成超级管理员后端login模块: ...
- Java：传值还是传引用？
这是一个Java的经典问题,大部分人从C,C++语言入门,C语言有三种传递方式:值传递,地址传递和引用传递.详细的对C语言指针,引用的我个人的理解,见链接. Java所有操作都是传值操作!都是传值操作 ...
- 指令计数器--Program counter
别名:指令指针.指令地址寄存器.程序计数器: 操作:顺序操作(计数器加一).分支操作(计数器修改): The program counter (PC), commonly called the ins ...
- centos7下安装docker（10容器底层--cgroup和namespace）
cgroup和namespace是实现容器底层的重要技术 cgroup:实现资源限制 namespace:实现资源隔离 1.cgroup:control group Linux操作系统通过cgroup ...
- Java中关于CyclicBarrier的使用
CyclicBarrier工具类主要是控制多个线程的一起执行,CyclicBarrier 实例可以多次使用. 演示程序: import java.util.Random; import java.ut ...