这两天做手机项目,使用到这个css3新属性。现在还不为所有浏览器支持,所以使用的时候要加上前缀。使用方法见下面:

html代码:

<div class="s-indLine">
<div class="s-indNav s-indIntro">
<span class="s-icon"></span>
<p>品牌介绍</p>
</div>
<div class="s-indNav s-indInfo">
<span class="s-icon"></span>
<p>优惠信息</p>
</div>
</div>
<div class="s-indLine">
<div class="s-indNav s-indShop">
<span class="s-icon"></span>
<p>门店查找</p>
</div>
<div class="s-indNav s-indGoods">
<span class="s-icon"></span>
<p>热卖商品</p>
</div>
</div>

css代码:

.s-indLine{
display: -webkit-box;
display: -moz-box;
display: box;
margin-bottom: 10px;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;
}
.s-indLine .s-indNav{
-webkit-box-flex: 5;
-moz-box-flex: 5;
box-flex: 5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
color: #ffffff;
text-align: center;
height: 105px;
padding: 15px 0px;
font-size: 1.5rem;
}
.s-indLine .s-indNav:first-child{
margin-right: 10px;
}
.s-indIntro{
background: #4eb566;
}
.s-indInfo{
background: #ffa422;
}
.s-indShop{
background: #7788f2;
}
.s-indGoods{
background: #ef604d;
}
.s-indLine .s-indNav .s-icon, .s-groupNav .s-icon{
width: 50px;
height: 50px;
display: inline-block;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.s-indIntro .s-icon{
background-image: url("group.png");
}
.s-indInfo .s-icon{
background-image: url("group.png");
}
.s-indShop .s-icon{
background-image: url("group.png");
}
.s-indGoods .s-icon{
background-image: url("group.png");
}

可以不给子元素设置box-flex值,直接使用width代替,也可以设置margin 和 padding 值。得到的效果图如下:

在chrome或者手机其他的以-webkit为内核的浏览器上调试时,上面的代码是没有问题的,但是在火狐下面,会出现问题,如下图所示:

这地方解决办法,必须给父元素添加width样式,例如 width: 100%; 即可。

此外在火狐上还有一个问题,上面说到可以给子元素不设置box-flex,而是设置width,但是在火狐上不能识别width,而是必须设置box-flex。

关于display: box 和 box-flex的更多相关文章

  1. js中box和box()的区别

    window.onload = function(){ var input = document.getElementByTagName('input')[0]; input.onclick = bo ...

  2. 详解 Flexible Box 中的 flex 属性

    导读: 弹性盒子是 CSS3 的一种布局模式,一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有适当的行为的布局方式.其中 flex 属性用于指定弹性子元素如何分配空间. flex 属性的值 ...

  3. 布局display属性(一)--【Flex】

    一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...

  4. win10系统在执行“ vagrant box add centos7 vagrant-centos-7.box”添加box时,报错“Vagrant failed to initialize at a very early stage: Failed to locate the powershell executable on the available PATH. ”

    这个意思是:在有效的路径中未能执行PowerShell命令. 请检查PowerShell的安装和有效的路径,然后再尝试重新运行这个命令. 在环境变量path中添加powershell的路径,例如:C: ...

  5. display:box和display:flex填坑之路

    背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overf ...

  6. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

  7. 【CSS3】 CSS3:弹性盒子(Flex Box)

    Flex布局是什么 如何指定一个容器为Flex布局 Flex的基本语法 display flex-direction justify-content align-items flew-wrap ali ...

  8. CSS3新属性之---flex box布局实例

    flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...

  9. CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

  10. DIV伸缩盒子box

    <div class="div1"> <div class="box"> <div>A</div> <di ...

随机推荐

  1. Net通用进销存管理系统 + 开发文档+ 使用说明

    通用进销存管理系统 + 开发文档+ 使用说明Net源码下载 包括下面的模块基础资料模块采购管理模块库存管理模块商务管理模块营业管理模块维修管理模块会员管理模块财务管理模块 Net通用进销存管理系统 + ...

  2. js中自己实现each方法来遍历多维数组

  3. 查linux端口连接情况用命令netstat

    查linux端口连接情况用命令netstat netstat -apn |grep cdnbest 或netstat –apn | grep 3320

  4. 从SQL下载大量数据到Excel

    之前不知设计原理,发生了大量数据(超过100w行)直接从数据库读取加载到网页中,直接导致内存溢出. Rediculous! 所以,现在改为分页查询到页面中. 由于其有全局逻辑,故折中每次加载1w条数据 ...

  5. IOS低版本遇到了坑不知道你遇到了没

    拿着项目给客户测试,客户那边三个人俩人水果手机是ios8以下版本,结果导致```(恭喜,坑出现!)总不能说老总!"您把版本升级到ios9 吧!

  6. sqlite的增删改查

    // 基本步骤 // 1. 打开数据库 // 2. 处理数据 // 3. 关闭数据库 //先设置全局变量 lazy var documentsPath: String = { let paths = ...

  7. dbcp数据源配置杂谈

    <!-- 数据源1 --> #驱动信息(driver, url, username, password)driverClassName=net.sourceforge.jtds.jdbc. ...

  8. 使用sql更改表的列的数据类型和添加新列和约束

    修改数据库表某一列或添加列,转载的哦~ --增加一列 ALTER TABLE 表名 ADD 列名 VARCHAR(20) NULL --删除一列 ALTER TABLE 表名 drop COLUMN ...

  9. python学习之——django环境搭建

    Django是一个基于MVC构造的框架,用于web开发,主要目的是简便.快速的开发数据库驱动的网站. 前提:已经安装python 搭建步骤: 1.https://www.djangoproject.c ...

  10. Spring Framework 笔记(一):IoC

    一:Spring中重要的概念 1. 容器( container ) : spring容器( ApplicationContext )的工作原则是创建容器中的组件( instance ),处理组件之间的 ...