当前位置: > > > CSS3 - 弹性盒子模型(flexbox)详解1(基本概念介绍、浏览器支持情况)

CSS3 - 弹性盒子模型(flexbox)详解1(基本概念介绍、浏览器支持情况)

相关文章系列:
CSS3 - 弹性盒子模型(flexbox)详解1(基本概念介绍、浏览器支持情况)[当前文章]
CSS3 - 弹性盒子模型(flexbox)详解2(伸缩容器的属性介绍、及样例)
CSS3 - 弹性盒子模型(flexbox)详解3(伸缩项目的属性介绍、及样例)

一、flexbox介绍

  • flexbox Flexible Box 的缩写,即为弹性盒子布局。
  • 传统的页面布局是基于盒子模型,依赖定位属性、流动属性和显示属性来解决。但对于一些伸缩型的布局,处理起来很麻烦。而 flexbox 布局可以为传统的盒子模型布局带来更大的灵活性。
  • flexbox 布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。Flex 容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小他们以防止溢出容器。

1,flexbox布局的组成

flexbox 布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为 flexbox 布局。
  • 设置为 display:flexdisplay:inline-flex 的元素称为伸缩容器
  • 伸缩容器的子元素称为伸缩项目。

2,伸缩布局模型

伸缩项目使用伸缩布局模型来排版。伸缩布局模型与传统的布局不一样,它按照伸缩流的方向布局。

默认情况下,伸缩容器由两根轴组成,即主轴(main axis)和交叉轴(cross axis)。
  • 主轴:开始的位置叫 main start,结束位置叫 main end。伸缩项目在主轴上占据的空间叫 main size
  • 交叉轴:开始的位置叫 cross start,结束位置叫 cross end。伸缩项目在交叉轴上占据的空间叫 cross size
根据设置的情况不同,主轴即可以是水平轴,也可以是垂直轴。不论哪个轴作为主轴,默认情况下,伸缩项目总是沿着主轴,从主轴开始位置到主轴结束位置进行排列的。

3,浏览器支持情况

下图显示目前主流浏览器对 flex 布局的支持情况(绿色表示完全支持,黄色表示支持部分功能)。可以看到主流的浏览器都已支持它。特别是如果只考虑移动端开发的话,可以放心大胆的使用了。
补充:IE10 也是支持部分功能。而 IE8 IE9 则完全不支持 flexbox。 
评论0