<!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. sql union和union all的用法及效率

    UNION指令的目的是将两个SQL语句的结果合并起来.从这个角度来看, 我们会产生这样的感觉,UNION跟JOIN似乎有些许类似,因为这两个指令都可以由多个表格中撷取资料. UNION的一个限制是两个 ...

  2. Arduino下LCD1602综合探究（上）——1602的两种驱动方式，如何使LCD的控制编程变得更简单

    一.前言: LCD ( Liquid Crystal Display 的简称)液晶显示器,已经逐渐替代CRT成为主流的显示设备之一,因此也成为了单片机发烧友绕不过的话题之一:而LCD1602更是很多单 ...

  3. 迷之bug

    是这样的.要解决tbody滚动,而thead不动的布局问题,我把它们分别放在两个表格里,上面的只有thead,下面的只有tbody, 然后解决宽度对齐的问题,我用colgroup设置每列的宽度,用的都 ...

  4. 【SAP BO】处理掉BOE打开Xcelsius报表时，外围出现的外边框(转)

    原帖地址:http://blog.csdn.net/liyi199488/article/details/8943286 通过BOE打开Xcelsius报表时,总是出现一个外边框. 处理办法: Xce ...

  5. Linux内核笔记——进程管理之执行体

    内核版本:linux-2.6.11 在Linux中,有多种执行体(指令流.执行单位),它们是CPU调度和分配资源的基本单位,它们是内核态可见的,即内核态下,每一种执行体都有对应的唯一数据结构task_ ...

  6. 通过LDAP管理VSFTP帐户

    yum install -y openldap openldap-servers openldap-clients pam_ldap nss-pam-ldapd vsftpd slappasswd # ...

  7. 简述HTML DOM及其节点分类

    在JavaScript中,document这个对象大家一定很熟悉,哪怕是刚刚开始学习的新人,也会很快接触到这个对象.而document对象不仅仅是一个普通的JavaScript内置对象,它还是一个巨大 ...

  8. Python 端口，IP扫描

    Python Socket函数 (1)TCP发送数据时,已建立好连接,不需要指定地址.UDP是面向无连接,每次分别指定发给谁. (2)s.bind(address) 将套接字绑定到地址,在AF_INE ...

  9. asp.net mvc3登录验证

    1,在web.config中  <system.web>节点下面增加: <authentication mode="Forms"> <forms na ...

  10. Github+Jekyll —— 创建个人免费博客（二）Ruby+Jekyll部署

    摘要: 本文中我将介绍一下如何在github上搭建个人Blog(博客),也顺便让我们掌握一下github Pages功能,另外还涉及到Jekyll技术. ======================= ...