??flexbox，一種CSS3的布局方式坛掠，也叫做彈性盒子模型赊锚，2009年w3c提出用來為盒裝模型提供最大的靈活性。
?布局的傳統(tǒng)解決方案屉栓，基于盒狀模型舷蒲，依賴?display?屬性 +?position屬性 +?float屬性。它對于那些特殊布局非常不方便友多，比如牲平，垂直居中就不容易實現(xiàn)。
????比如：在知道對象寬高的情況下域滥，實現(xiàn)div盒子水平垂直居中纵柿。對居中元素絕對百分比定位，然后通過margin偏移的方式來實現(xiàn)启绰。
?.container{
????????width:?600px;
????????height:?400px;
????????border:?1px?solid?#000;
????????position:?relative;
????}
????.box{
????????width:?200px;
????????height:?100px;
????????border:?1px?solid?#000;
????????position:?absolute;
????????left:?50%;
????????top:?50%;
????????margin-left:?-100px;
????????margin-top:-50px;
????}
假如使用了flex后昂儒，實現(xiàn)起來就簡單了，而且不需要自己去算委可，也不需要絕對定位渊跋，只需要通過對伸縮容器定義兩個屬性，justify-content定義伸縮項目沿著主軸線的對齊方式為center着倾， align-items定義伸縮項目在側(cè)軸（垂直于主軸）的對齊方式為center拾酝，具體如下：
.container{
????width:?600px;
????height:?400px;
????border:?1px?solid?#000;
????display:?flex;
????justify-content:center;
????align-items:center;
}
.box{
????width:?200px;??//寬度可以為任意
????height:?100px;?//高度可以為任意
????border:?1px?solid?#000;
}
/*----------------------------------那么，接下來開始介紹Flexbox屈呕。---------------------------------*/
簡單放一張圖??
介紹一下：
flexbox由flex容器 + flex項目組成 （容器即父元素微宝，項目即子元素）。
? ?注意虎眨，設(shè)為 Flex 布局以后蟋软，子元素的float、clear和vertical-align屬性將失效嗽桩。
有兩條軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）岳守。主軸的開始位置（與邊框的交叉點）叫做main start，結(jié)束位置叫做main end碌冶；交叉軸的開始位置叫做cross start湿痢，結(jié)束位置叫做cross end。
項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做main size譬重，占據(jù)的交叉軸空間叫做cross size拒逮。
容器六個屬性：flex-direction
? ? ? ? ? ? ? ? ? ? ? ? ?flex-wrap
? ? ? ? ? ? ? ? ? ? ? ? ?flex-flow
? ? ? ? ? ? ? ? ? ? ? ? ?justify-content
? ? ? ? ? ? ? ? ? ? ? ? ?align-items
? ? ? ? ? ? ? ? ? ? ? ? ?align-content
具體屬性的值見上圖
優(yōu)點：簡單、方便臀规、快速滩援。?
缺點：兼容性
? ? 具體大家可以見這個網(wǎng)站：caniuse（http://caniuse.com/#search=flexbox）
? ? ?/*--------------------------------------------------------結(jié)束。-------------------------------------------*/
