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 ...
随机推荐
- java针对不同方法的分页
一.常见的分页实现方式 ①使用List接口中的subList(int startIndex,int endIndex)方法实现分页 ②直接使用数据库SQL语句实现分页 ③使用hibernate等框架实 ...
- godaddy.com 都转到 www.dnspod.cn
我们在godaddy上注册了域名,但因为godaddy对域名解析的诸多限制和缓慢. 所以必需把域名服务器更改为dnspod上,然后再在dnspod上做A记录,CNAME等设置都很方便.
- VMWare:vSphere6 企业版参考序列号
HV4WC-01087-1ZJ48-031XP-9A843 NF0F3-402E3-MZR80-083QP-3CKM2 4F6FX-2W197-8ZKZ9-Y31ZM-1C3LZ JZ2E9-6D2D ...
- node学习笔记_04 express相册
学习node用express框架做了一个相册展示及上传功能: 1.没有连接服务器,这里全部是操作文件夹 2.安装上传文件的依赖formidable,npm install --save formida ...
- Http接口安全整理
1.Http接口安全概述: 1.1.Http接口是互联网各系统之间对接的重要方式之一,使用http接口,开发和调用都很方便,也是被大量采用的方式,它可以让不同系统之间实现数据的交换和共享,但由于htt ...
- Remainders Game （中国剩余定理）
题意:已知k和一个集合C={c1,c2,c3....cn},问是否有满足集合C的中国剩余定理的解x,使x%k的值唯一确定. 数学知识: #include<iostream> #includ ...
- Git安装与配置——详细教程1
1.下载Git客户端 想要安装Git首先要下载Git的安装包程序. Git安装包下载地址:https://git-scm.com/downloads/ 2.安装Git 双击安装程序进行安装: a. 欢 ...
- mysql用户操作、权限分配、远程登录设置
对最近mysql的常用运维命令进行整理 查看使用的哪个配置文件启动的mysql 1. ps aux|grep mysql|grep 'my.cnf' 如果启动的命令中选择了配置文件,则可以查询出来,也 ...
- 2017-2018-2 20155314《网络对抗技术》Exp5 MSF基础应用
2017-2018-2 20155314<网络对抗技术>Exp5 MSF基础应用 目录 实验内容 实验环境 基础问题回答 预备知识 实验步骤--基于Armitage的MSF自动化漏洞攻击实 ...
- http/2 多路复用技术
虽然 HTTP 1.1 默认启用长TCP连接,但所有的请求-响应都是按序进行的(这里的长连接可理解成半双工协议.即便是HTTP 1.1引入了管道机制,也是如此).复用同一个TCP连接期间,即便是通过管 ...