CSS3的Flexible Boxes详细使用教程

segmentfault   发布时间:2015-07-29 17:55:27   作者:classicemi   我要评论
这篇文章主要介绍了CSS3的Flexible Boxes详细使用教程,Flexible Boxes是布局设计中的常用模型,需要的朋友可以参考下

Flexible Box是什么?Flexible意为可伸缩的,Box意为盒子,可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出,这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式。
浏览器兼容性

作为非常现实的开发者,是否对一个新技术进行关注,首先要考虑它的浏览器兼容性如何。我们的伸缩盒模型的浏览器兼容性看起来还是相当不错的。

2015729175809456.jpg (600×370)

可以看到,现代浏览器基本上都支持了,IE10开始也支持了(IE和Safari分别加-ms-和-webkit-前缀即可),移动端的支持情况也比较良好,唯一不支持的平台只有Opera了,咱不带他玩→_→

因此,奥巴马同志说:伸缩盒模型是好的,有前途的。(嗯嗯~)
伸缩盒基本概念

伸缩盒的最大特点或者说优点就在于它考虑到了现今高昂的房价和人民日益增长的住宅需求之间的矛盾,房屋面积是有限的,但是我们的伸缩盒能够最合理最高效地把房子分给大家。面积多了,就给大家伙多分点;面积小了,就让各位挤一挤少分点,总而言之不会让任何一个人露宿街头的(overflow)!

既然我们提到了房子和住户的关系,那么住户的排列自然需要沿一定的方向。对于块级元素来说,布局的延伸方向是自上而下的,也就是纵向。而对于行内元素来说,布局延伸方向是自左往右的,也就是横向。而伸缩盒呢,它的方向是可变的,既能纵向延伸,也能横向舒展,这取决于你的设置了。
伸缩盒模型基本术语

伸缩盒模型的思想和普通的块级元素和行内元素的布局思想有较大的不同,它引入了一些新的概念和术语,通过下面这张图来了解一下:
2015729175849323.png (563×333)

Flex container 伸缩盒容器
这就是用来分的房子,这是一间神奇的房子,要让它变得神奇,将display属性声明为flex或inline-flex即可~

Flex item 伸缩项
房子里的居民,他们都会占有自己应得的住房面积。

为了形象说明,我们用代码来解释。

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.   <div class="item item-1">item 1</div>  
  3.   <div class="item item-2">item 2</div>  
  4.   <div class="item item-3">item 3</div>  
  5. </div>  

CSS设置为:

CSS Code复制内容到剪贴板
  1. .container {   
  2.   display: flex;   
  3.   width300px;   
  4.   height100px;   
  5.   ...   
  6. }  

在这里display: inline-flex;好像也可以。
对于其中的伸缩项元素,我们需要给他们事先安排好住房面积比例,我们就用最简单最健康的1:1:1吧~我们将比例声明在flex属性里

CSS Code复制内容到剪贴板
  1. .item-1 {   
  2.   flex: 1;   
  3.   ...   
  4. }   
  5. .item-2 {   
  6.   flex: 1;   
  7.   ...   
  8. }   
  9. .item-3 {   
  10.   flex: 1;   
  11.   ...   
  12. }  

2015729175944765.jpg (303×103)

我们的大房子被完美地平分成三个隔间了,三家平分房租!

如果有人想住大点的房子,我们直接改变flex的比例即可:

CSS Code复制内容到剪贴板
  1. .item-1 {   
  2.   flex: 1;   
  3.   ...   
  4. }   
  5. .item-2 {   
  6.   flex: 1;   
  7.   ...   
  8. }   
  9. .item-3 {   
  10.   flex: 2;   
  11.   ...   
  12. }  

2015729180014256.jpg (303×103)

是不是很方便?

Axes 轴
我们可以看到,图中有两条轴,分别标注了主轴和次轴(垂直于主轴)。然而实际上哪一条是主轴并不确定,是由我们来规定的。
1. flex-direction 此属性规定哪条轴为主轴。
2. justify-content 此属性设置了伸缩项在主轴方向上的排列方式,这个稍后解释。
3. align-items 此属性和上面的justify-content相对,表示伸缩项在次轴上的排列方式。
4. align-self 此属性规定某一个特定的伸缩项元素在次轴上的布局方式,在某个元素上设置该属性会覆盖它的align-items属性。也就是这个属性会让某个元素更有个性,不走寻常路~

flex-direction
当我们不想沿着默认的方向分房子的时候,我们可以改变flex-direction属性的值来改变主轴和方向,该属性默认的取值为row;

CSS Code复制内容到剪贴板
  1. .container {   
  2.   flex: row-reverse;   
  3.   ...   
  4. }  

顾名思义,这会让伸缩项的排列方向反过来:
2015729180033517.jpg (303×103)

当此属性设置为column时,主次轴就会对调,元素的排列方向也会随之改变:

CSS Code复制内容到剪贴板
  1. .container {   
  2.   flex-direction: column;   
  3.   ...   
  4. }  

2015729180053382.jpg (303×103)

至于flex: column-reverse的含义就不用我多说了吧~

justify-contents
有的时候,大家挨着住,一点空隙都没有也会很难受,连个过道都没有,隐私也不能保证对吧。这个时候,我们可以改变分配政策了,不再按比例分配,而是定额分配,每个人的面积是确定的。多出的房屋面积改成公共区域。

CSS Code复制内容到剪贴板
  1. .item {   
  2.   width80px;   
  3.   ...   
  4. }   
  5. ...   


设定了width属性后也要记得去掉flex属性的声明哦,不然flex属性的效果仍然会把width覆盖掉~
同时,如果width属性也不设定的话,元素宽度会表现为内容的宽度,which means 当伸缩项内部无内容时,将不会进行渲染,其表现就和display: none;一样。
这时,在容器上声明justify-content属性就可以安排伸缩项的位置了:

CSS Code复制内容到剪贴板
  1. .content {   
  2.   justify-content: flex-start | flex-end | center | space-between | space-around;   
  3. }  

2015729180158209.png (600×600)

align-items
这项属性会改变次轴上元素排列的方式,对于本例来说原来次轴方向上元素的高度是表现为height: 100%;的,设定了align-items属性后,其高度表现就会发生改变了。

CSS Code复制内容到剪贴板
  1. .content {   
  2.   align-items: flex-start | flex-end | center | baselinebaseline | stretch;   
  3. }  

说到这里了,伸缩项具体的表现其实可以想象出来了,想象不出来的就自己动手试一试吧~

order
在伸缩项上声明此属性,可以无视HTML结构的顺序而按照order从小到大的顺序沿flex-direction方向排列。比如:

CSS Code复制内容到剪贴板
  1. .item-1 {   
  2.   order: 3;   
  3.   ...   
  4. }   
  5. .item-2 {   
  6.   order: 1;   
  7.   ...   
  8. }   
  9. .item-3 {   
  10.   order: 2;   
  11.   ...   
  12. }  

2015729180219160.jpg (303×103)

flex-wrap
此属性的默认值为nowrap,也就是忽略伸缩项的宽度,管你要多少住房面积,通通按照flex属性说好的分配,不许换行。

CSS Code复制内容到剪贴板
  1. .container {   
  2.   flex-wrap: nowrap | wrap | wrap-reverse   
  3. }   
  4.   
  5. .item {   
  6.   width150px;   
  7. }  

2015729180239680.jpg (600×121)

flex-grow,flex-shrink 和 flex-basis
上文提到的flex属性实际上是这三个属性的简写形式。这三个属性有相似性,都是表示项与项之间分配空间的相对比例关系,不同之处在于:
1. flex-grow属性:属性值为该伸缩项所占空间相对于其他伸缩项(声明了flex相关属性的项)的比值。
2. flex-shrink属性:该伸缩项相对于其他伸缩项缩小的比值,也就是说当flex-shrink: 3;时,该项所占空间为其他项的1/3。
3. flex-basis属性:属性值为该项所占空间占容器空间的百分比。

注意:对于flex-basis属性,当所有项的属性值相加<=100%时,会严格按照百分比值来渲染。当属性值相加>100%时,元素并不会溢出,而是表现为两两之间所占空间大小遵循相互的百分比比值。也就是说当存在三个伸缩项且flex-basis值都为50%时,表现行为与三个项均为flex: 1;一样。

Flexible Boxes布局模式在响应式开发中尤其好用,对不同的终端,设置元素之间的空间分配关系将会变成一件非常简单的事。伸缩盒布局和响应式布局中流行的流体布局哪种更好,还是可以结合起来,就看各位开发者发挥自己的聪明才智了!

相关文章

  • 几个CSS3的flex弹性盒模型布局的简单例子演示

    这篇文章主要介绍了几个CSS3的flex弹性盒模型布局的简单例子演示,flex布局是迄今为止最强大的web布局方式,需要的朋友可以参考下
    2016-05-12
  • 详解CSS中的flex容器与flex属性

    这篇文章主要介绍了CSS中的flex容器与flex属性,是CSS入门学习中的基础知识,需要的朋友可以参考下
    2016-04-08
  • 基础的CSS3弹性盒Flexbox布局使用实例

    这篇文章主要介绍了基础的CSS3弹性盒Flexbox布局使用实例,文中最后也提到了解决兼容性问题的基本方法,需要的朋友可以参考下
    2016-04-08
  • CSS3的Flexbox布局的简明入门指南

    这篇文章主要介绍了CSS3的Flexbox布局的简明入门指南,Flexbox在"布局界"可谓风光无限,近来Facebook开源的React Native也采用Flexbox来布局,需要的朋友可以参考下
    2016-04-08
  • 深入剖析CSS弹性盒模型flex

    下面小编就为大家带来一篇深入剖析CSS弹性盒模型flex。小编觉得挺不错的,现在分享给大家,也给大家做一个参考。一起跟随小编过来看看吧
    2016-03-29
  • css使用flexbox布局容器内多元素水平居中

    这篇文章主要为大家详细介绍了css使用flexbox布局容器内多元素水平居中的方法,如何使用flexbox布局多元素水平居中?本文为大家进行解答,感兴趣的小伙伴们可以参考一下
    2016-03-17
  • CSS3 flex布局之快速实现BorderLayout布局

    所谓的布局管理器分为好多种,最常见的有流式布局管理器(FlowLayout)、边界布局管理器(BorderLayout)和表格布局管理器(GridLayout)。本文给大家介绍CSS3 flex布局之
    2015-12-03
  • CSS中使用Flexbox来达到居中效果的实例

    这篇文章主要介绍了CSS中Flexbox来达到居中效果的实例,注意一下IE浏览器中的兼容问题,需要的朋友可以参考下
    2015-07-15
  • css3弹性盒模型(Flexbox)详细介绍

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。本文主要是总结一下今天所学,有需要的朋友可以参考下
    2014-10-08
  • CSS3 Flexbox中flex-shrink属性的用法示例介绍

    当flex items的大小超过了flex container时, 各个flex item的压缩比例,下面有个不错的教程,大家可以参考下
    2013-12-30

最新评论