<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>盒模型display:box;</title>

</head>

<body>

  <article class="wrap">

    <section class="section sectionOne">01</section>

    <section class="section sectionTwo">02</section>

    <section class="section sectionThree">03</section>

  </article>

</body>

</html>
.wrap {

  width: 600px;

  height: 200px;

  border: 1px solid #000000;

  display: -webkit-box; /*这样元素就会内联化*/

  display: -moz-box;

  display: box;

  -webkit-box-orient:horizontal;

  -moz-box-orient:horizontal;

  box-orient: horizontal;

  -webkit-box-direction: reverse;

  box-direction: reverse;

  -webkit-box-align: center;

  box-align: center;

  /*子容器的水平对其方式*/

  -webkit-box-pack: justify;

}

.section {

  width: 50px;

  height: 80px;

}

.sectionOne {

  background: orange;

  /*

  -webkit-box-flex:1;

  box-flex:1;

  */

}

.sectionTwo {

  background: purple;

  /*

  -webkit-box-flex:2;

  box-flex:2;

  */

  /*margin: 0 50px;*/

  height: 108px;

}

.sectionThree {

  background: green;

  width: 100px;

}

注意：

给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，
都可将子容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。
如果父容器选择vertical或block-axis属性对子容器进行垂直排列，
其是对父容器的高度进行分配划分。此时如果父容器定义了宽度值，
其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，
其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。

效果：

CSS3盒模型display:box;box-flex:3;的更多相关文章

  1. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  2. CSS3盒模型display初探（display:box/display:flex）

    可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...

  3. CSS3盒模型display:box简述

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. box-f ...

  4. [转]CSS3盒模型display:box详解

    时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...

  5. css3盒模型学习--利用box自适应布局

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典   的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没 ...

  6. CSS3盒模型display:-webkit-box;的使用

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没有得到 ...

  7. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  8. 移动web开发实践-css3（1）盒模型display:-webkit-box;的使用

    提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...

  9. CSS3：布局display属性的flex（弹性布局）

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

随机推荐

  1. gradle下载地址

    gradle下载:http://services.gradle.org/distributions

  2. maven中把依赖的JAR包一起打包

    <buizld> <plugins> <plugin> <artifactId>maven-assembly-plugin</artifactId ...

  3. 洛谷 P1466 集合 Subset Sums Label：DP

    题目描述 对于从1到N (1 <= N <= 39) 的连续整数集合,能划分成两个子集合,且保证每个集合的数字和是相等的.举个例子,如果N=3,对于{1,2,3}能划分成两个子集合,每个子 ...

  4. Oracle解锁与加锁（HR用户为例)

    SQL*Plus: Release 9.2.0.4.0 - Production on Tue Jul 14 18:12:38 2009 　　Copyright (c) 1982, 2002, Ora ...

  5. sql 连接数不释放 ，Druid异常：wait millis 40000, active 600, maxActive 600

    Hibernate + Spring + Druid 数据库mysql 由于配置如下 <bean id="dataSource" class="com.alibab ...

  6. Probe在性能测试中的使用方式简介

    简介: Lambda Probe(以前称为Tomcat Probe)是一款实时监控和管理的Apache Tomcat实例的基本工具. Lambda Probe 是基于 Web + AJAX 的强大的免 ...

  7. Smart3D系列教程1之《浅谈无人机倾斜摄影建模的原理与方法》

    一.引言 倾斜摄影测量技术是国际测绘遥感领域近年发展起来的一项高新技术,以大范围.高精度.高清晰的方式全面感知复杂场景,通过高效的数据采集设备及专业的数据处理流程生成的数据成果直观反映地物的外观.位置 ...

  8. vscode过滤pyc文件

    在工作区设置里添加如下代码: { "files.exclude": { "**/.git": true, "**/.svn": true, ...

  9. SQL执行效率2-执行计划

    以下语句可以进行SQL 语句执行时间分析,两个Go之间就是SQL查询语句 use Work--数据库名 go set statistics profile on set statistics io o ...

  10. Javascript中call和apply的区别和用法

    JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别.其实就是更改对象的内部指针,即改变对象的this指向的内容.这在面向对象的js编程过程中有时是很有用的.call ...