您现在的位置: 365建站网 > 365学习 > CSS3中的box-flex弹性盒属性布局讲解

CSS3中的box-flex弹性盒属性布局讲解

文章来源:365jz.com     点击数:183    更新时间:2018-04-20 08:47   参与评论
box-flex是CSS3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高、水平均分、按比例划分。但是它有一定的局限性,在firefox、chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz)、chrome(-webkit)。

一、box-flex属性
box-flex主要让子容器针对父容器的宽度按一定规则进行划分。

<div class="box">  
<div class="col_1">111</div>  
<div class="col_2">222</div>  
<div class="col_3">333</div>  
</div>  
<style type="text/css">  
.box {  
display:box;  
display:-webkit-box;  
display:-moz-box;  
background-color:#fff;  
width:500px;  
height:100px;  
border:1px solid #333;  
margin:0 auto;  
}  
.col_1 {  
box-flex:1;  
-moz-box-flex:1;  
-webkit-box-flex:1;  
background-color:#ffc;  
}  
.col_2 {  
background-color:#ccf;  
box-flex:2;  
-moz-box-flex:2;  
-webkit-box-flex:2;  
}  
.col_3 {  
background-color:#fcf;  
box-flex:2;  
-moz-box-flex:2;  
-webkit-box-flex:2;  
}  
</style>


注意:
父容器必须定义为display:box,其子容器才可以进行划分(如果定了display:box则该容器为内联元素,使用margin:0 auto让其居中在firefox下无效,需要通过父容器的text-align:center;来控制。但在chrome下是可以的)
上面所讲到的例子中,三个子块分别设置了1、2、2,也就是把这个父容器分成5份,分别占据了父结构宽度的1/5(100px)、2/5(200px)、2/5(200px)。
以上是按比例数来进行划分的,如果其中一个或多个子容器设置了固定宽度,其它子容器没有设置,那么设置宽度的按宽度来算,剩下的部分再按上面的方法来计算。

.col_3 {  
background-color:#fcf;  
width:50px;/*设置宽度为50px*/ 
}  

当子容器中需要有间隔的时候,他们平分的宽度需要减去中间的margin,然后再按比例平分。

CSS Code
  1. .col_2 {   
  2.  background-color:#ccf;   
  3.  box-flex:2;   
  4.  -moz-box-flex:2;   
  5.  -webkit-box-flex:2;   
  6.  margin:0 20px;   
  7. }  

二、box属性
上面讲到的是如何将box-flex如何对父容器的宽度进行划分,现在来说一下父容器里面的box属性包括哪些。
box-orient, box-direction, box-align, box-pack, box-lines
1、box-orient
box-orient用来确定父容器里子容器的排列方式是水平还是垂直,可选属性如下:
horizontal | vertical | inline-axis | block-axis | inherit
horizontal和inline-axis属性其效果表现一致,都可以将容器水平排列,在默认情况下也呈现水平排列的样式。当父容器设置高度时,在firefox下面其子容器的高度无效,但chroma下面则有效。

CSS Code
  1. .col_1 {   
  2.  height:50px;   
  3. }   
  4. .col_2 {   
  5.  height:80px;   
  6. }  

如果你容器不设置高度,子容器的高度值才生效,在firefox下面他们的高度取其中的最大值。而chrome下面设置高度的子容器为自己的高度,未设置的其高度和最大值的高度一样,其实就是和父容器的高度一致。

CSS Code
  1. .box {   
  2.  /*未设置高度*/  
  3. }   
  4. .col_1 {   
  5.  height:50px;   
  6. }   
  7. .col_2 {   
  8.  height:80px;   
  9. }   
  10. .col_3 {   
  11.  /*未设置高度*/  
  12. }  

vertical和block-axis属性效果表现一致,都可将子容器垂直排列。他们是对父容器的高度进行分配。如果子容器设置了宽度,也是谷歌下面有效,火狐无效,其它都与horizontal表现一致。

2、box-direction
box-direction用来确定父容器里面的子容器排列顺序,具有以下属性:
normal | reverse | inherit
normal是默认值,如上面测试结果。
reverse表示反转,其表现方式跟normal相反,呈现为3、2、1

 

3、box-align
box-align表示父容器里面子容器的垂直对齐方式,属性值为:
start | end | center | baseline | stretch
start、baseline展示效果

 

end展示效果



 

center展示效果

 

stretch展示效果,(谷歌下面如start)

4、box-pack
box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示:
start | end | center | justify
css代码

CSS Code
  1. .box {   
  2.  display:box;   
  3.  display:-webkit-box;   
  4.  display:-moz-box;   
  5.  background-color:#fff;   
  6.  width:500px;   
  7.  border:1px solid #333;   
  8.  margin:0 auto;   
  9.  height:100px;   
  10.  -webkit-box-pack:start;   
  11.  -moz-box-pack:start;   
  12.  box-pack:start;   
  13. }   
  14. .col_1,.col_2,.col_3{   
  15.  width:100px;   
  16. }  

start:在box-pack表示水平居左对齐,如下所示:

end:在box-pack表示水平居右对齐,如下图所示

center:在box-pack表示水平居中对齐,如下图所示

justify:在box-pack表示两边对齐试
 

box-flex的值为至少为1的整数时起作用。但是,仅仅一个box-flex属性是不足以实现子元素间的空间分配,因为还要看其老爸的意思。只有老爸开口说:“这个房子现在你们随意分配。”其子女才能分配。

所以,父元素也是需要添加必要的声明的。此声明就是:

#father { display: box; }

似乎也可以是:

#father { display: inline-box; }

此声明好像是在说:孩子们,现在我把这个房子变成了可随意分配状态,非固定财产,你们可以自己协商分配了。
display: box;的声明其实就是弹性盒子模型的声明,此声明下的子元素的行为与表现与CSS2中的传统盒子模型的表现是有显著的差异的。

毕竟属于CSS3的东西,目前而言,仅Firefox/Chrome/Safari浏览器支持弹性盒子模型(IE9不详,Opera尚未),且使用的时候,需要附带私有前缀。就是诸如-moz-, -webkit-之类。

CSS实例
现在把上面的马林分房子的例子CSS实例化,看看在web页面上是个如何的表现:

主要CSS代码如下:

.test_box {
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
    
    ...
 }
.list {
   ...
}
.list_one {
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1;
}
.list_two{
    -moz-box-flex: 2; 
    -webkit-box-flex: 2; 
    box-flex: 2;
}

HTML代码如下:

<div class="test_box">
    <div class="list list_two">1</div>
    <div class="list list_one">2</div>
    <div class="list list_one">3</div>
</div>







弹性盒子模型下的爸爸(父标签)其实是很有货的,男人嘛,就应该这样,够沉稳够内涵。
爸爸肚子中的货有:box-orient, box-direction, box-align, box-pack, box-lines. 现在依次讲讲这里box打头的属性都是干嘛用的。

box-orient
box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有:

horizontal | vertical | inline-axis | block-axis | inherit

其中,inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的,让子元素横排;而vertical与block-axis的表现也是一致的,让元素纵列。

切换demo页面左边的单选选项卡(如果您的浏览器为Firefox/Chrome/Safari),就可以看到不同的box-orient属性值的行为表现了。//zxx:对比可以发现,Firefox下的display:box会收缩外框(有点display:inline-block的感觉),而Chrome则没有收缩。
点击左边的单选切换属性值 张鑫旭-鑫空间-鑫生活

box-direction
box-direction是用来确定子元素的排列顺序,可选值有:

normal | reverse | inherit

其中normal是默认值,表示按照正常顺序排列。所谓正常顺序,就是我们看书写文字的顺序,从左往右,由上至下,先出现的元素,就上面或是左边。而reverse表示反转,原本从左往右应该是1-2-3的,结果显示确实3-2-1。

例如我们将此属性应用在我们一开始的分配房子的demo上的话,最后的显示就会如下缩略图——顺序反过来的:
弹性布局顺序反转缩略图 张鑫旭-鑫空间-鑫生活

相关CSS代码如下:

.test_box {
    display: -moz-box; 
    display: -webkit-box; 
    display: box;
    
    -moz-box-direction:reverse;
    -webkit-box-direction:reverse;
    box-direction:reverse;
    
    ...
 }

 

box-align
box-align与box-pack都是决定盒子内部剩余空间怎么使用的。在行为效果上就是表现为“对齐”,这跟Adobe的软件中的一些“对齐”是一致的,例如化妆大师photoshop中的图层-对齐:
对齐 photoshop 张鑫旭-鑫空间-鑫生活

其中box-align决定了垂直方向上的空间利用,也就是垂直方向上的对齐表现。为了便于记忆,我们可以拿来和CSS2中的vertical-align隐射记忆,两者都有”align”,都是都是垂直方向的对齐;而剩下的box-pack就是水平方向的了。

box的可选参数有:

start | end | center | baseline | stretch

其中stretch为默认值,为拉伸,也就是父标签高度过高,其孩子元素的高度就多高,//zxx:以后等高布局不用愁了。start表示顶边对齐,end为底部对齐,center为居中对齐,baseline表示基线(英文字母o,m,n等的底边位置线)对齐。

 

点击demo左边的单选按钮组,即可查看各个属性值的效果。
demo操作提示截图 张鑫旭-鑫空间-鑫生活

例如,选中”center”这个单选按钮,结果右侧的显示如下面的截图:



 

其他各个属性值的效果您可以自己点击查看(非IE浏览器),这里就不一一展示效果截图了。

box-pack
box-pack决定了父标签水平遗留空间的使用,其可选值有:

start | end | center | justify

就大部分的行为表现来说分别对应text-align属性的值:left | right | center | justify;但是,之所以box-pack不使用”left”, 而是”start”,是因为box-direction属性,这玩意可以反转原本的排列,原本的“左对齐”反转后结果是“右对齐”了,此时”left”显然就词不达意了,所以使用”start”更具有概括性,就是与父标签的起始位置对齐,从而不会产生语义与行为上的困扰。
为什么使用start而不是left 张鑫旭-鑫空间-鑫生活

其中”start”是box-pack属性的默认值,justify表示两端对齐。
box-pack:justify效果截图 张鑫旭-鑫空间-鑫生活

为了方便直观的查看各个属性值的效果,我制作了与上面类似风格的demo,您可以狠狠地点击这里:box-pack属性值效果demo

下为选中end的界面截图缩略图:
选中end后的截图 张鑫旭-鑫空间-鑫生活

貌似发现在Firefox浏览器下,justify是没有反应的,可能还未支持。Chrome浏览器表现良好。

box-lines
box-lines是用来决定子元素是可以换行显示呢?还是就算挤出油还是单行显示。两个可选值:

single | multiple

其中single是默认值,表示死活不换行,如下图所示:
box-lines:single单行显示溢出 张鑫旭-鑫空间-鑫生活

设置box-lines:multiple后,就多行显示了。不过我自己测试了下,貌似现在无论是Firefox浏览器还是Chrome都不认识box-lines:multiple属性,是暂不支持呢,还是什么什么?

 

五、两个遗漏的属性

子元素除了box-flex属性,还有两个属性,box-flex-group和box-ordinal-group,其中box-flex-group的作用不详,貌似目前浏览器也不支持;box-ordinal-group的作用是拉帮结派。还是上面马林大叔分房子的例子。小马女友阿凤又不消停,眼瞅着大马的房子面积比自己大好多,心里不平衡,于是,就去拉拢中马,一起打大马房子的主意。这个“拉拢”就是这里的box-ordinal-group,拉拢的组织团伙是有一个数字级别的,决定了你这个组织的位置。

数值越小,位置就越靠前,这不难理解,第一组在最前嘛,随后第二组,第三组… 例如:box-ordinal-group:1的组就会在box-ordinal-group:2的组前面显示。于是,我们可以利用这个属性改变子元素的顺序。例如下面这个例子:
HTML代码如下:

<div class="test_box">
    <div class="list list_two">1</div>
    <div class="list list_one">2</div>
    <div class="list list_one">3</div>
</div>

相关CSS如下:

.list_one {
    ...

    -moz-box-ordinal-group: 1; 
    -webkit-box-ordinal-group: 1; 
    box-ordinal-group: 1;
}
.list_two{
    ...

    -moz-box-ordinal-group: 2; 
    -webkit-box-ordinal-group: 2; 
    box-ordinal-group: 2;
}

结果后面两个class为”list_one”的元素跑到前面去了。如下图所示:
改变列表的显示顺序 张鑫旭-鑫空间-鑫生活

 

六、实际点的应用

如果您现在浏览器地址栏中的地址中含有”www.zhangxinxu.com”字样,并且浏览器为较新的Firefox/Chrome/Safari浏览器,那么您就可以在本页面上找到我做的应用。

咔咔,我就不卖卖关子了,我改变了相关文章某一处的显示顺序,就是随机文章。
随机文章 张鑫旭-鑫空间-鑫生活

但是在本文所在的页面上,随机文章第一个显示了(由于赞不支持换行,故垂直显示了)。
随机文章顺序第一 张鑫旭-鑫空间-鑫生活

相关CSS代码如下:

.similarity ul{display:-moz-box; display:-webkit-box; display:box; -moz-box-orient:vertical; -webkit-box-orient:vertical; -o-box-orient:vertical; box-orient:vertical; }
.similarity ul li{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; -moz-box-ordinal-group:2; -webkit-box-ordinal-group:2; box-ordinal-group:2;}
.similarity ul li:last-child{-moz-box-ordinal-group:1; -webkit-box-ordinal-group:1; box-ordinal-group:1; }


 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (183人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------