CSS3 - 弹性盒子模型(flexbox)详解1(基本概念介绍、浏览器支持情况)
相关文章系列:
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。