这两天做手机项目,使用到这个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. iOS 当请求到的数据是double类型,会失去精准度,并且去掉小数点后的0

    首先请求到的数据都会变成字符串,先将字符串转化为double类型 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Menlo; color: ...

  2. Win7与Mint双系统安装体验

    双系统安装前的准备 1.安装前的准备 安装双系统可能会对磁盘文件带来一些影响,为了避免在安装过程中由于系统瘫痪造成不必要的损失,所以我们在准备安装双系统之前,要对PC机中的重要文件进行备份,对资料要做 ...

  3. CocosCreator反射在Android中的使用

    CocosCreator反射在Android中的使用 新建一个CocosCreator项目,然后点击构建 构建完成之后,即可用AndroidStudio打开构建的项目 使用AndroidStudio打 ...

  4. iOS手机功能汇总

    开发中经常会调用手机功能,今天来汇总一下,若有不足欢迎大家指出,下面分别介绍如下功能 : 电话 短信 邮件 通讯录 定位 跳转应用 跳转App Store 打开其他文件 电话 调用电话有下图两种不同样 ...

  5. URL传递中文乱码的问题

    在AJAX浏览器来进行发送数据时,一般它所默认的都是UTF-8的编码. 使用JQUERY中所提供的方法来做操作 encodeURI function verify() {    //解决中文乱麻问题的 ...

  6. SQL Server创建复合索引时,复合索引列顺序对查询的性能影响

    说说复合索引 写索引的博客太多了,一直不想动手写,有一下两个原因:一是觉得有炒剩饭的嫌疑,有兄弟曾说:索引吗,只要在查询条件上建索引就行了,真的可以这么暴力吗?二来觉得,索引是个非常大的话题,很难概括 ...

  7. oracle pl/sql split函数

    在软件开发过程中程序员经常会遇到字符串的拼接和拆分工作. 以java开发为例: 前台传入字符串拼接形式的一个JSON数据,如:"1001,1002,1003",这可能代表了一组序号 ...

  8. LSD-SLAM深入学习(3)-代码解析

    前言 在LSD-SLAM深入学习(2)中我们已经对算法进行分析,此处假设读者对于ros的基本操作都已经很熟悉,而且已经编写了一定量的的代码,我们直接上干货.此处分析的程序如下 main_live_od ...

  9. 记录Qt的一个诡异Bug

    公司的一款项目,在迭代开发阶段,突然发现运行速度越来越慢,界面切换卡顿时间在2秒以上.经过和某个不卡版本的对比,惊奇的发现程序二进制都一模一样,就几个图片资源和脚本不一样.经过差不多一天的排查,发现是 ...

  10. centos查看系统cpu个数、核心书、线程数

    1.查看物理cpu个数 grep 'physical id' /proc/cpuinfo | sort -u | wc -l 2.查看核心数量 grep 'core id' /proc/cpuinfo ...