CSS3属性——“box-flex”
CSS3的新增属性有很多,其中有一个比较神奇的,通常称为盒子模型布局,不需要把div浮动,也能合理分配。看如下例子:
HTML:
<div id="box">
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<div class="box3">我是box3</div>
</div>
如果需求是这样的:.box2的宽度是固定的200px,然后水平居中,然后.box1和.box3分居其左右,平分剩下的空间。
使用这个属性就可以这样来写:
#box{
display:box;
display: -moz-box;
display: -webkit-box;
background-color: #eee;
height:90px;
text-align: center;
line-height: 90px;
}
.box1{
box-flex:;
-moz-box-flex:;
-webkit-box-flex:;
background-color: #f00;
}
.box2{
width:200px;
background-color: #0f0;
}
.box3{
box-flex:;
-moz-box-flex:;
-webkit-box-flex:;
background-color: #ff0;
}
此时此刻我们可以在iPhone 6下看到以下效果:
当然,这是需求要求,三个盒子也可以都写box-flex:*,它也会按比例分配。
CSS3属性——“box-flex”的更多相关文章
- CSS3:布局display属性的flex(弹性布局)
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- 浅谈CSS3中display属性的Flex布局
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...
- CSS3 弹性盒子(Flex Box)
1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...
- H5、CSS3属性的支持性以及flex
一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...
- 响应式布局(CSS3弹性盒flex布局模型)
传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...
- 如何处理CSS3属性前缀(转载)总结
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- 如何处理CSS3属性前缀
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- 让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
- 【原】常见CSS3属性对ios&android&winphone的支持
2个月前,我在博文<webapp开发中兼容Android4.0以下版本的css hack>中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了” ,在 ...
- CSS3属性border-radius绘制多种多样的图形
border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...
随机推荐
- linux的基本java环境搭建
1.安装rz,sz以便于上传和下载文件 yum install -y lrzsz 2.安装java环境 -- jdk1.8 官网下载jdk1.8:http://www.oracle.com/techn ...
- 【转】Wi-Fi 20mhz 和 40mhz 频段带宽的区别是什么?
一.无线网卡模式 wifi现在市场上主要存在802.11a/b/g/n/ac五种模式的无线网卡: 1.b的最大速率11Mbps,频段2.4G,带宽22M: 2.a的最大速率54Mbps,频段5G,带宽 ...
- ubuntu mount u盘以及cp拷贝文件夹
如果是ubuntu桌面环境的话,不用mount,接入的U盘就可以直接被系统识别,访问起来非常方便,但如果没有桌面环境呢,比如在ubuntu server端,如何访问U盘呢? 第一步:查看U盘信息sud ...
- 错误:Cannot set property 'innerHTML' of null
360浏览器代码编辑器里提示错误:Cannot set property 'innerHTML' of null 原因是代码执行时要调用的内容不存在
- 基于EF Core的Code First模式的DotNetCore快速开发框架
前言 最近接了几个小单子,因为是小单子,项目规模都比较小,业务相对来说,也比较简单.所以在选择架构的时候,考虑到效率方面的因素,就采取了asp.net+entity framework中的code f ...
- 51nod 1595 回文度 | 马拉车Manacher DP
51nod 1595 回文度 题目描述 如果长度为n的字符串是一个回文串,同时它的长度为floor(n/2)的前缀和后缀是K-1度回文串,则这个字符串被称为K度回文串.根据定义,任何字符串(即使是空字 ...
- UWP上可用的GB2312编码
大概是在WP8的时候,网上有一个WP8可用的GB2312编码的解决方法,就是那个DBCSCodePage. 但是由于UAP开始,微软删掉了GetManifestResourceStream,所以这东西 ...
- 开发人员的福音:微软、谷歌、Mozilla将他们所有的web API文档放在同一个地方
Tips 原文作者:Liam Tung 原文地址:Developers rejoice: Microsoft, Google, Mozilla are putting all their web A ...
- mysql5.7在windows不能启动的方法及查看数据库大小命令
1.将mysql目录下的my-default.ini改为my.ini 2.cmd进入mysql的bin目录下 3.执行mysqld --initialize进行初始化(如果mysql目录下已经存在da ...
- Entity Framework Core 2.0 使用代码进行自动迁移
一.前言 我们在使用EF进行开发的时候,肯定会遇到将迁移更新到生产数据库这个问题,前面写了一篇文章介绍了Entity Framework Core 2.0的入门使用,这里面介绍了使用命令生成迁移所需的 ...