这两天做手机项目,使用到这个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. jQuery(window) 和 jQuery(document)的区别

    jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用

  2. Wordpress上传到阿里云服务器

    Wordpress上传到阿里云服务器 登录服务器 https://account.aliyun.com/login/login.htm 绑定域名 获取FTP信息.数据库信息 在本地修改wordpres ...

  3. java 常见dos命令

    盘符: 进入指定的盘符下. dir : 列出当前目录下的文件以及文件夹 md : 创建目录 rd : 删除目录    注意:rd不能删除非空的文件夹,而且只能用于删除文件夹. cd : 进入指定目录 ...

  4. ceph与openstack对接

    对接分为三种,也就是存储为openstack提供的三类功能1.云盘,就好比我们新加的硬盘2.原本的镜像也放在ceph里,但是我没有选择这种方式,原因是因为后期有要求,但是我会把这个也写出来,大家自己对 ...

  5. 树莓派 config.txt

    树莓派开机默认配置文件:/boot/config.txt # For more options and information see # http://www.raspberrypi.org/doc ...

  6. IIS内存溢出-设置IIS的应用程序池

    在ASP.NET Web服务器上,ASP.NET所能够用到的内存,通常不会等同于所有的内存数量.在machine.config(C:/WINDOWS/Microsoft.NET/Framework/v ...

  7. 在子线程中new Handler报错--Can't create handler inside thread that has not called Looper.prepare()

    在子线程中new一个Handler为什么会报以下错误? java.lang.RuntimeException:  Can't create handler inside thread that has ...

  8. Linux cp命令使用说明

    Linux cp命令使用说明 --功能说明:复制目录或文件 --命令格式:cp  [参数]  <文件或目录>  <文件或目录> --常用参数: -R 复制目录 -i 覆盖文件之 ...

  9. jQuery Mobile 工具栏

    jQuery Mobile 工具栏 工具栏元素常被放置于页眉和页脚中 - 以实现"已访问"的导航: 标题栏 页眉通常会包含页眉标题/LOGO 或一到两个按钮(通常是首页.选项或搜索 ...

  10. 重启eclipse color theme失效的解决办法

    For Eclipse Mars users: In the main menu bar, go to Window > Preferences In the preference tree o ...