移动端布局(3)
4.弹性盒模型 4.1.什么是弹性盒模型 css3引入了一种新的布局模式,叫做Flexbox布局,即伸缩布局和(Flexible Box)模型,很多地方又称为弹性盒模型,我们下面都叫弹性盒模型,它可以用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局 css中的布局方式总结: 块布局 行内布局 表格布局 定位布局 FlexBox布局(css3新引入) 4.2.掌握Flexbox模型中的术语 1.主轴和侧轴 主轴和侧轴你可以简单的理解为水平和垂直方向上的两根轴,类似x轴和y轴,默认情况下主轴是水平方向的,但是可以设置,将主轴设置成垂直方向,主轴外的另一轴就是侧轴 2.伸缩容器和伸缩项目 伸缩容器就是通过display属性设置为flex或者inline-flex的容器(盒子),伸缩项目就是这个伸缩容器下面的子元素 4.3.新版本和老版本 Flexbox布局语法规范主要分为三种: 旧版本:2009年版本,使用display:box或者display:inline-box 混合版本: 2011年版本,使用display:flexbox 或者display:inlne-flexbox 最新版本: 使用display:flex 或者 display:inlne-flex 查看Flexbox兼容性支持情况 https://caniuse.com/#search=flexbox 4.4