css3笔记——弹性盒模型(Flexible Box Module)简介

css3在css2的基础上新增了盒模型的属性,提出了弹性盒模型的概念。

首先使用弹性和模型(Flexible Box Module),需要定义父容器display的属性,但因为Flexible经常变动具体的属性值有所不同(参考):

  • 2009年以前display为box或者inline-box、box-{*}。
  • 2011年,设置display为flexbox或者flex()函数。
  • 2012-2013最新的则是display:flex; 或者flex-{*}。

注:弹性盒模型只有chrome和FF支持。

box-orient定义盒子的布局取向

box-orient定义了盒子内元素的流动布局方向,属性有

  • horizontal 从左到右在一条水平线上显示子元素。
  • vertical:从上到下在一条垂直线上显示子元素。
  • inline-axis:默认值,盒子元素沿着内联轴显示子元素。
  • block-axis:沿着块轴显示子元素。

注:inline-axis和block-axis是根据书写模式来决定。

在不同属性下的(demo)呈现如图所示:

flexible-box-muduleflexible-box-mudule

众所周知html文档中元素所处的前后顺序也会影响布局,为了更加便捷,亦或是更加高的控制程度(结构和表现分离)。css3可以改变盒子中子元素的流动顺序,可以理解为改变浏览器对其的解析顺序(默认为写在前面的先解析),主要有两个属性

box-direction 改变流动顺序,属性有:

  • normal 即遵从一般的顺序 ,从左到右, 从上到下。
  • reverse 与normal相反。
  • inherit 继承上级元素的显示顺序。

当设置为reverse时呈现如图所示(色块的顺序相反):

flexible-box-muduleflexible-box-mudule

b*ox-ordinal-group* 精准设定浏览器的解析顺序,属性为,按照属性中数字从小到大进行解析(文档的颜色顺序为red green blue yellow 但是其属性值为4 3 1 2)。

flexible-box-muduleflexible-box-mudule

*box-flex *可以自适应的设置子元素所占的空间,其值为。当盒子中设置了多个box-flex属性时,浏览器的做法是会把这些盒子的box-flex属性值相加,然后按他们各自box-flex值占总值的比例来分配空间。

flexible-box-muduleflexible-box-mudule

box-pack和box-align属性则设置了当子元素所有盒子并未占满整个父元素时候的水平和垂直方向的布局方式。

box-pack属性(水平方向)有:

  • start 子元素显示在父元素的左边
  • end 子元素显示在父元素的右边
  • center 子元素居中显示
  • justify 子元素平均分布在父元素中,第一个紧靠父元素左边,相应最后一个靠近右边。

box-align属性(垂直方向)有:

  • start 靠近顶部
  • end 靠近底部
  • center 居中
  • baseline 所有盒子沿着他们的基线排列。
  • stretch 每个元素的高度被调整到适合父元素的高度显示。

设置box-pack和box-align 属性为center可以得到如下图的居中效果。

flexible-box-muduleflexible-box-mudule

box-lines 还可以设置盒子溢出父元素时候的布局方式,其值有:

  • single 所有子元素都单行或者单列显示
  • multiple 所有子元素可以多行或者多列显示

注:此属性无浏览器支持

需要注意的是demo中色块上的css属性只是表示所用到的css3属性,并不代表该属性使用的位置。

旧的示例

新的示例

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus