CSS3 - 弹性盒子模型(flexbox)详解1（基本概念介绍、浏览器支持情况）
作者：hangge | 2016-12-06 08:50
相关文章系列：
CSS3 - 弹性盒子模型(flexbox)详解1（基本概念介绍、浏览器支持情况）[当前文章]
CSS3 - 弹性盒子模型(flexbox)详解2（伸缩容器的属性介绍、及样例）
CSS3 - 弹性盒子模型(flexbox)详解3（伸缩项目的属性介绍、及样例）
CSS3 - 弹性盒子模型(flexbox)详解1（基本概念介绍、浏览器支持情况）[当前文章]
CSS3 - 弹性盒子模型(flexbox)详解2（伸缩容器的属性介绍、及样例）
CSS3 - 弹性盒子模型(flexbox)详解3（伸缩项目的属性介绍、及样例）
一、flexbox介绍
- flexbox 是 Flexible Box 的缩写，即为弹性盒子布局。
- 传统的页面布局是基于盒子模型，依赖定位属性、流动属性和显示属性来解决。但对于一些伸缩型的布局，处理起来很麻烦。而 flexbox 布局可以为传统的盒子模型布局带来更大的灵活性。
- flexbox 布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex 容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。
1，flexbox布局的组成
flexbox 布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为 flexbox 布局。- 设置为 display:flex 或 display:inline-flex 的元素称为伸缩容器
- 伸缩容器的子元素称为伸缩项目。
2，伸缩布局模型
伸缩项目使用伸缩布局模型来排版。伸缩布局模型与传统的布局不一样，它按照伸缩流的方向布局。
默认情况下，伸缩容器由两根轴组成，即主轴（main axis）和交叉轴（cross axis）。
- 主轴：开始的位置叫 main start，结束位置叫 main end。伸缩项目在主轴上占据的空间叫 main size。
- 交叉轴：开始的位置叫 cross start，结束位置叫 cross end。伸缩项目在交叉轴上占据的空间叫 cross size。
3，浏览器支持情况
下图显示目前主流浏览器对 flex 布局的支持情况（绿色表示完全支持，黄色表示支持部分功能）。可以看到主流的浏览器都已支持它。特别是如果只考虑移动端开发的话，可以放心大胆的使用了。
全部评论（0）