display:box和display:flex屬性介紹

1.display:box

父容器裏面的box屬性有box-orient|box-dirextion|box-align|box-pack|box-lines

box-orient:用來肯定父容器裏面子元素的排列方式，是水平仍是豎直horizontal|vertical|inline-axis|block-axis|inherit

box-direction:肯定父容器裏面子容器的排列順序，normal|reverse|inherit

box-align:表示父容器裏面子容器的垂直對齊方式，start|end|center|baseline|stretch

box-pack:表示父容器裏面子容器的水平對齊方式，start|end|center|justify

box-lines:決定子元素是單行顯示仍是能夠換行，single|multiple

子元素的屬性有box-flex|box-flex-group|box-ordinal-group

box-flex:子元素所佔比例，取值爲數字

box-flex-group:做用不詳，瀏覽器不支持

box-ordinal-group:能夠改變子元素的順序

Tips:

(1).在box-orient屬性中，inline-axis是默認值。且horizontal與inline-axis的表現彷佛一致的，讓子元素橫排；而vertical與block-axis的表現也是一致的，讓元素縱列。

2.display:flex

父容器的屬性有flex-direction|flex-wrap|flex-flow|justify-content|align-items|align-content

flex-direction:決定主軸的排列方向，row|row-reverse|column|column-reverse,相似於display:box裏面的box-orient

flex-wrap:決定是否能夠換行，wrap|nowrap|wrap-reverse,相似於display:box裏面的box-lines

flex-flow:flex-directionheflex-wrap的簡寫形式

justify-content:決定子元素在主軸上的對齊方式，flex-start|flex-end|enter|space-between|space-around，相似於display:box裏面的box-pack或者box-align

align-items:決定子元素在交叉軸上的對齊方式，flex-start|flex-end|center|baseline|stretch(默認)

align-content:義了多根軸線的對齊方式，flex-start|flex-end|enter|space-between|space-around|stretch

子元素的屬性有order|flex-grow|flex-shrink|flex-basis|flex|align-self

order:決定子元素排列順序，數值越小，排的越靠前 

flex-grow：定義子元素的放大比例，默認0，不放大

flex-shrink：定義子元素的縮小比例，默認1，即若是空間不足，子元素將縮小

flex-basis：屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小

flex：flex-grow,flex-shrink,flex-basis的簡寫

align-self：容許子元素單個於其餘子元素不同的對齊方式，可覆蓋align-items屬性。默認值auto，表示繼承父元素align-items屬性，若是沒有父元素，等同於stretch

網上有不少資料可查，這個只是爲了方便本身使用。

連接：

http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool