css3的Flexible Boxes详细使用教程.docx

css3的FlexibleBoxes详细使用教程css3的FlexibleBoxes详细使用教程FlexibleBox是什么？Flexible意为可伸缩的，Box意为盒子，可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出，这是在原有的大家非常熟悉的block,inline-block,inline的基础上延伸出的新一代布局模式。浏览器兼容性作为非常现实的开发者，是否对一个新技术进行关注，首先要考虑它的浏览器兼容性如何。我们的伸缩盒模型的浏览器兼容性看起来还是相当不错的。可以看到，现代浏览器基本上都支持了，IE10开始也支持了（IE和Safari分别加-ms-和-webkit-前缀即可），移动端的支持情况也比较良好，唯一不支持的平台只有Opera了，咱不带他玩→_→伸缩盒基本概念伸缩盒的最大特点或者说优点就在于它考虑到了现今高昂的房价和人民日益增长的住宅需求之间的矛盾，房屋面积是有限的，但是我们的伸缩盒能够最合理最高效地把房子分给大家。面积多了，就给大家伙多分点；面积小了，就让各位挤一挤少分点，总而言之不会让任何一个人露宿街头的（overflow）！既然我们提到了房子和住户的关系，那么住户的排列自然需要沿一定的方向。对于块级元素来说，布局的延伸方向是自上而下的，也就是纵向。而对于行内元素来说，布局延伸方向是自左往右的，也就是横向。而伸缩盒呢，它的方向是可变的`，既能纵向延伸，也能横向舒展，这取决于你的设置了。伸缩盒模型基本术语伸缩盒模型的思想和普通的块级元素和行内元素的布局思想有较大的不同，它引入了一些新的概念和术语，通过下面这张图来了解一下：Flexcontainer伸缩盒容器这就是用来分的房子，这是一间神奇的房子，要让它变得神奇，将display属性声明为flex或inline-flex即可~Flexitem伸缩项房子里的居民，他们都会占有自己应得的住房面积。为了形象说明，我们用代码来解释。XML/HTMLCode复制内容到剪贴板item1item2item3CSS设置为：CSSCode复制内容到剪贴板  .container{  display:flex;  width:300px;  height:100px;  ...  }在这里display:inline-flex;好像也可以。对于其中的伸缩项元素，我们需要给他们事先安排好住房面积比例，我们就用最简单最健康的1:1:1吧~我们将比例声明在flex属性里CSSCode复制内容到剪贴板  .item-1{  flex:1;  ...  }  .item-2{  flex:1;  ...  }  .item-3{  flex:1;  ...  }我们的大房子被完美地平分成三个隔间了，三家平分房租！如果有人想住大点的房子，我们直接改变flex的比例即可：CSSCode复制内容到剪贴板  .item-1{  flex:1;  ...  }  .item-2{  flex:1;  ...  }  .item-3{  flex:2;  ...  }是不是很方便？Axes轴我们可以看到，图中有两条轴，分别标注了主轴和次轴（垂直于主轴）。然而实际上哪一条是主轴并不确定，是由我们来规定的。1.flex-direction此属性规定哪条轴为主轴。2.justify-content此属性设置了伸缩项在主轴方向上的排列方式，这个稍后解释。3.align-items此属性和上面的justify-content相对，表示伸缩项在次轴上的排列方式。4.align-self此属性规定某一个特定的伸缩项元素在次轴上的布局方式，在某个元素上设置该属性会覆盖它的align-items属性。也就是这个属性会让某个元素更有个性，不走寻常路~flex-direction当我们不想沿着默认的方向分房子的时候，我们可以改变flex-direction属性的值来改变主轴和方向，该属性默认的取值为row；CSSCode复制内容到剪贴板  .container{  flex:row