CSS3的Flexible Boxes详尽应用实例教程

Flexible Box是甚么？Flexible意为可伸缩的，Box意为盒子，能够了解为1种新型的盒实体模型——伸缩盒实体模型。由CSS3标准提出，这是在原来的大伙儿十分熟习的block, inline-block, inline的基本上拓宽出的新1代合理布局方式。
访问器适配性

做为十分实际的开发设计者，是不是对1个新技术应用开展关心，最先要考虑到它的访问器适配性怎样。大家的伸缩盒实体模型的访问器适配性看起来還是非常非常好的。

能够看到，当代访问器基础上都适用了，IE10刚开始也适用了（IE和Safari各自加-ms-和-webkit-前缀便可），挪动端适用状况也较为优良，唯1不适用的服务平台仅有Opera了，咱不带他玩→_→

因而，奥巴马朋友说：伸缩盒实体模型是好的，有发展前途的。（嗯嗯~）
伸缩盒基础定义

伸缩盒的最大特性或说优势就在于它考虑到到了现如今昂贵的房价和老百姓日趋提高的住房要求之间的分歧，房子面积是比较有限的，可是大家的伸缩盒可以最有效最高效率地把房屋分给大伙儿。面积多了，就给大伙儿伙多分点；面积小了，就让各位挤1挤少分点，总而言之不容易让任何1本人露宿街头的（overflow）！

既然大家提到了房屋和居民的关联，那末居民的排序当然必须沿1定的方位。针对块级元向来说，合理布局的拓宽方位是自上而下的，也便是纵向。而针对行内元向来说，合理布局拓宽方位是自左往右的，也便是横向。而伸缩盒呢，它的方位是可变的，既能纵向拓宽，也能横向伸展，这取决于你的设定了。
伸缩盒实体模型基础术语

伸缩盒实体模型的观念和一般的块级元素和行内元素的合理布局观念有较大的不一样，它引进了1些新的定义和术语，根据下面这张图来掌握1下：

Flex container 伸缩盒器皿
这便是用来分的房屋，这是1间奇异的房屋，要让它变得奇异，将display特性申明为flex或inline-flex便可~

Flex item 伸缩项
房屋里的住户，她们都会占据自身应得的住宅面积。

以便形象表明，大家用编码来解释。

CSS设定为：

在这里display: inline-flex;仿佛还可以。
针对在其中的伸缩项元素，大家必须给她们事前分配好住宅面积占比，大家就用最简易最身心健康的1:1:1吧~大家将占比申明在flex特性里

大家的大房屋被完善地均分成3个隔间了，3家均分房租！

假如有人想住大点的房屋，大家立即更改flex的占比便可：

是否很便捷？

Axes 轴
大家能够看到，图中有两条轴，各自标明了主轴和次轴（竖直于主轴）。但是具体上哪1条是主轴其实不明确，是由大家来要求的。
1. flex-direction 此特性要求哪条轴为主轴。
2. justify-content 此特性设定了伸缩项在主轴方位上的排序方法，这个稍后解释。
3. align-items 此特性和上面的justify-content相对性，表明伸缩项在次轴上的排序方法。
4. align-self 此特性要求某1个特殊的伸缩项元素在次轴上的合理布局方法，在某个元素上设定该特性会遮盖它的align-items特性。也便是这个特性会让某个元素更有个性化，不走寻常路~

flex-direction
当大家不想沿着默认设置的方位分房屋的情况下，大家能够更改flex-direction特性的值来更改主轴和方位，该特性默认设置的赋值为row；

说白了，这会让伸缩项的排序方位反过来：

当此特性设定为column时，次序轴就会对调，元素的排序方位也会随之更改：

至于flex: column-reverse的含意就无需我多说了吧~

justify-contents
有的情况下，大伙儿挨着住，1点间隙都沒有也会很难受，连个过道都沒有，隐私保护也不可以确保对吧。这个情况下，大家能够更改分派政策了，已不按占比分派，而是定额分派，每一个人的面积是明确的。多出的房子面积改为公共性地区。

设置了width特性后也要记得去掉flex特性的申明哦，要不然flex特性的实际效果依然会把width遮盖掉~
另外，假如width特性也不设置的话，元素宽度会主要表现为內容的宽度，which means 当伸缩项內部无內容时，将不容易开展3D渲染，其主要表现就和display: none;1样。
这时候，在器皿上申明justify-content特性便可以分配伸缩项的部位了：

align-items
这项特性会更改次轴上元素排序的方法，针对本例来讲原先次轴方位上元素的高宽比是主要表现为height: 100%;的，设置了align-items特性后，其高宽比主要表现就会产生更改了。

说到这里了，伸缩项实际的主要表现实际上能够想像出来了，想像不出来的就自身动手能力试1试吧~

order
在伸缩项上申明此特性，能够疏忽HTML构造的次序而依照order从小到大的次序沿flex-direction方位排序。例如：

flex-wrap
此特性的默认设置值为nowrap，也便是忽视伸缩项的宽度，管你要是多少住宅面积，全都依照flex特性说好的分派，不准换行。

flex-grow，flex-shrink 和 flex-basis
上文提到的flex特性具体上是这3个特性的简写方式。这3个特性有类似性，全是表明项与项之间分派室内空间的相对性占比关联，不一样的地方在于：
1. flex-grow特性：特性值为该伸缩项所占室内空间相对别的伸缩项（申明了flex有关特性的项）的比值。
2. flex-shrink特性：该伸缩项相对别的伸缩项变小的比值，也便是说当flex-shrink: 3;时，该项所占室内空间为别的项的1/3。
3. flex-basis特性：特性值为该项所占室内空间占器皿室内空间的百分比。

留意：针对flex-basis特性，当全部项的特性值相加<=100%时，会严苛依照百分比值来3D渲染。当特性值相加>100%时，元素其实不会外溢，而是主要表现为两两之间所占室内空间尺寸遵照互相的百分比比值。也便是说当存在3个伸缩项且flex-basis值都为50%时，主要表现个人行为与3个项均为flex: 1;1样。

Flexible Boxes合理布局方式在回应式开发设计中特别功能强大，对不一样的终端设备，设定元素之间的室内空间分派关联可能变为1件十分简易的事。伸缩盒合理布局和回应式合理布局中时兴的流体合理布局哪样更好，還是能够融合起来，就看各位开发设计者充分发挥自身的聪慧智谋了！