CSS3盒模型display:box;box-flex:3;

<!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属性对子容器进行垂直排列,
其是对父容器的高度进行分配划分。此时如果父容器定义了宽度值,
其子容器的宽度值设置则无效状态;如果父容器不设置宽度值,
其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。

效果:

时间: 2024-10-10 06:07:07

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

CSS3盒模型display初探(display:box/display:flex)

可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码. 参考: flex: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.ruanyifeng.com/blog/2015/07/flex-examples.html box: http://www.warting

CSS3盒模型display:box详解

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome/safari(-webkit-).一.box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分htm

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

时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome/safari(-webkit-). 一.box-flex属性 b

CSS3盒模型温故

CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.block.table.absolute position.float.浏览器把每个元素看做一个盒模型,每个盒模型是由以下几个属性组合所决定的:display.position.float.width.height.margin.paddinghe border等,不同类型的盒模型会产生不同的布局 什么是盒

css3 盒模型

0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不甚,有会带来混乱.css3让我们之前了解的怪异模式能够很好的在页面中使用,下面来了解下上面提到的w3c标准盒模型和怪异模式下的盒模型. div { width: 200px; height: 100px; padding: 20px; border:30px solid blue; margin:

css3盒模型和弹性布局的相关属性

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素.假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box".这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中.看了有些晕啊,看一下以下几个属性应该就懂了:1.content-box:宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框.例如: div{box-sizing:border-box; -moz-box-sizing:borde

CSS3盒模型之box-sizing

这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的大小了.所以很多时候我们对于大小的设置都需要使用百分比,嗯,试试看吧! 对于一个导航,我们初始是想这样: 代码如下: css: nav{width: 100%;background: #001125;overflow: hidden} nav a{display: block;float: left

css3盒模型

css2.1盒模型: 当你定义盒子的宽高后:如果添加padding和border值后盒子的宽高会被撑大 盒子的高度=定义的高度+(padding-top + padding-bottom)+(border-top + border-bottom); 盒子的宽度=定义的宽度+(padding-left+ padding-right)+(border-left+ border-right); css3.0盒模型: 当你定义盒子高度后:如果添加padding和border值后盒子大小不会改变,他会向内

CSS3弹性盒模型 display:box

刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应.bootstrap为了兼容性在实现栅格布局时,就不得不生成大量如下代码: .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .