参考链接UsingCSS3FlexibleBoxeslayout菜鸟教程链接:http://www.runoob.com/css3/cs...什么是FlexibleBox?Flexible是可扩展的意思,Box是盒子的意思,可以理解为一种新型的盒子模型---伸缩盒子模型。由CSS3规范提出,这是在原来大家非常熟悉的block、inline-block、inline基础上扩展的新一代布局模式。浏览器支持伸缩框的基本概念。伸缩箱最大的特点或者说优势就是兼顾了当今高房价与人民群众日益增长的住房需求之间的矛盾。房屋面积有限,但我们的伸缩箱能做到最合理。最有效地将房子分配给每个人。面积太大,给大佬多加分;如果面积小,就让大家挤进去,少拿分。总之,不允许任何人露宿街头(溢出)!既然提到了房子和住户的关系,那么住户的布置自然要遵循一定的方向。对于块级元素,布局的延伸方向是自上而下的,也就是垂直的。对于行内元素,布局延伸方向是从左到右,即水平方向。至于伸缩箱,它的方向是可变的,可以垂直或水平延伸,这取决于您的设置。弹性盒模型的基本术语弹性盒模型的思想与普通的块级元素和内联元素的布局思想有很大的不同。它介绍了一些新的概念和术语。我们来看下图:flexcontainerflexBoxcontainer这个就是用来划分的房子。这是一座神奇的房子。为了神奇,声明display属性为flex或inline-flex~Flexitem房子里的住户都会有。您应得的住房面积。为了便于说明,我们用代码来说明。
