css總結（1）flex佈局

一、瀏覽器兼容性：
設置爲 Flex 佈局後，子元素的 float、clear、vertical-align 屬性都將失效
寫法：
display: box; /* 2009 version 老語法 /
display: flexbox; / 2011 version 過渡語法 /
display: flex | inline-flex; / 2012 version 新語法 /
新語法目前的支持情況：
Chrome 29+
Firefox 28+
Safari 9+
iOS Safari 9+
Android 4.4+
IE Mobile 11+
兼容性寫法：.
.wrap {
display: -webkit-box; / 老語法 iOS 6-, Safari 3.1-6 /
display: -moz-box; / 老語法 Firefox 19- (buggy but mostly works) /
display: -ms-flexbox; / 過渡語法 IE 10 /
display: -webkit-flex; / 新語法 Chrome /
display: flex; / 新語法, Spec - Opera 12.1, Firefox 20+ */
}
二、用的做多的：不確定高度需要水平垂直居中
.item{
display: flex;
justify-content: center;
align-items: center;
}
三、屬性介紹
1、作用於父元素（容器）的
首先，定義一個父容器：

.container { display: flex | inline-flex; } 有六個屬性可以設置的容器上：

flex-direction：定義了主軸的方向，即項目的排列方向

row（默認值）：主軸在水平方向，起點在左側，也就是我們常見的從左到右；
row-reverse：主軸在水平方向，起點在右側；
column：主軸在垂直方向，起點在上沿；
column-reverse: 主軸在垂直方向，起點在下沿。
圖：




flex-wrap：默認情況下，項目是排成一行顯示的，flex-wrap 用來定義當一行放不下時，項目如何換行
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
圖：



flex-flow：flex-flow 是 flex-direction 和 flex-wrap 的簡寫，默認值是 row no-wrap。

justify-content：定義了項目在主軸上的對齊方式
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
圖：

align-items：定義了項目在交叉軸上如何對齊
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
圖：





align-content：align-content 定義了多根軸線的對齊方式，若此時主軸在水平方向，交叉軸在垂直方向，align-content 就可以理解爲多行在垂直方向的對齊方式。項目排列只有一行時，該屬性不起作用。
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}






2、作用於子元素（項目）的
對項目設置屬性，可以更靈活地控制 Flex 佈局。以下六種屬性可以設置在項目上：

order：order 定義了項目的排列順序，默認值爲 0，數值越小，排列越靠前。

flex-grow：
ex-grow 定義了項目的放大比例，默認爲 0，也就是即使存在剩餘空間，也不會放大。
如果所有項目的 flex-grow 都爲 1，則所有項目平分剩餘空間；如果其中某個項目的 flex-grow 爲 2，其餘項目的 flex-grow 爲 1，則前者佔據的剩餘空間比其他項目多一倍。

flex-shrink：
flex-shrink 定義了項目的縮小比例，默認爲 1，即當空間不足時，項目會自動縮小。
如果所有項目的 flex-shrink 都爲 1，當空間不足時，所有項目都將等比縮小；如果其中一個項目的 flex-shrink 爲 0，其餘都爲 1，當空間不足時，flex-shrink 爲 0 的不縮小。

flex-basis：
flex-basis 定義了在分配多餘的空間之前，項目佔據的主軸空間，默認值爲 auto，即項目原來的大小。瀏覽器會根據這個屬性來計算主軸是否有多餘的空間。
flex-basis 的設置跟 width 或 height 一樣，可以是像素，也可以是百分比。設置了 flex-basis 之後，它的優先級比 width 或 height 高。

flex：
flex 屬性是 flex-grow、flex-shrink、flex-basis 的縮寫，默認值是 0 1 auto，後兩個屬性可選。
該屬性有兩個快捷值：auto（1 1 auto）和 none（0 0 auto）。auto 代表在需要的時候可以拉伸也可以收縮，none 表示既不能拉伸也不能收縮。

.item {
flex: auto | none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
}
align-self：
align-self 用來定義單個項目與其他項目不一樣的對齊方式，可以覆蓋 align-items 屬性。默認屬性值是 auto，即繼承父元素的 align-items 屬性值。當沒有父元素時，它的表現等同於 stretch。
align-self 的六個可能屬性值，除了 auto 之外，其他的表現和 align-items 一樣。