上一篇我們講解了, flex容器的屬性, 如何定義主軸方向, 以及主軸\側(cè)軸對齊方式

　　這篇講解子元素的一些屬性.

　　如何對子項(xiàng)目進(jìn)行排序?

　　彈性盒模型第一次可以讓我們方便的對元素進(jìn)行排序

　　使用 order屬性, 它的默認(rèn)值是0

　　元素按照order順序排列

　　如何定義子項(xiàng)目大小?

　　flex布局提供另外一個屬性 flex-basis

　　它用來設(shè)定元素在主軸方向的大小

　　注意主軸可以是row方向, 也可以column方向

　　另外, 某個子元素, 可以單獨(dú)設(shè)置跟其它子元素不一致的(側(cè)軸)對齊方式.

　　最后, 要隆重的介紹flex-grow這個屬性了

　　它叫做『剩余空間瓜分比例』

　　從圖上可以看出, AB沒有撐滿flex容器, 如果希望AB調(diào)整大小撐滿容器的話

　　我們需要加上flex-grow這個屬性

　　.container {

　　display: flex;

　　width: 500px;

　　....

　　}

　　div:nth-child(1) {

　　width: 100px;

　　background-color: pink;

　　flex-grow: 1;

　　}

　　div:nth-child(2) {

　　width: 100px;

　　background-color: lightseagreen;

　　flex-grow: 1;

　　}

　　那么AB元素會按照1:1的比例把父元素剩余的空間瓜分掉, 效果如圖

　　當(dāng)然, 如果你希望B保持不變, 只有A變大的話, 你可以這樣寫

　　div:nth-child(1) {

　　background-color: pink;

　　flex-grow: 1;

　　}

　　div:nth-child(2) {

　　background-color: lightseagreen;

　　flex-grow: 0; /*默認(rèn)值就是0, 其實(shí)不用寫*/

　　}

　　我們也可以調(diào)整比例

　　div:nth-child(1) {

　　width:100px;

　　background-color: pink;

　　flex-grow: 2;

　　}

　　div:nth-child(2) {

　　width:100px;

　　background-color: lightseagreen;

　　flex-grow: 1;

　　}

　　AB按照2:1的比例瓜分了剩余空間

　　既然可以放大, 元素也能縮小

　　接下來介紹flex-shrink屬性, 它叫做多余空間削減比例

　　當(dāng)元素大小超出了flex父容器, 子元素可以按比例縮減.

　　但是這里的算法比剛才的flex-grow復(fù)雜了一些

　　我們先看一種簡單的情況

　　.container{

　　display: flex;

　　flex-direction: row;

　　justify-content: flex-start;

　　box-shadow: 0 0 0 1px black;

　　height: 100px; width: 400px; /*父元素寬度為400*/

　　}

　　div:nth-child(1) {

　　width: 300px; /*子元素A寬度為300*/

　　background-color: pink;

　　flex-shrink: 1; /*多余空間削減比例為1, 默認(rèn)值為1, 可以不寫*/

　　}

　　div:nth-child(2) {

　　width: 200px; /*子元素B寬度為200*/

　　background-color: lightseagreen;

　　flex-shrink: 1; /*多余空間削減比例為1, 默認(rèn)值為1, 可以不寫*/

　　}

　　削減比例我們設(shè)置了1:1 , 那么實(shí)際結(jié)果呢?

　　從圖中的實(shí)際效果來看,

　　A元素削減了60個像素

　　B元素削減了40個像素

　　這并不是1:1啊, 這是3:2啊

　　這個3:2又是怎么來的呢?

　　其實(shí), 它就是AB元素的原始比例大小

　　所以, 在削減比例上, 元素還會受到原始大小比例的影響

　　總結(jié)一個公式如下:

　　子元素的削減比例===原始大小比例 X flex-shrink比例

　　那么, 根據(jù)我們所得的公式, 如果我們想讓上面的例子當(dāng)中

　　AB元素都削減一樣的大小該如何做呢?

　　答案就是:

　　div:nth-child(1) {

　　width: 300px;

　　background-color: pink;

　　flex-shrink: 2;

　　}

　　div:nth-child(2) {

　　width: 200px;

　　background-color: lightseagreen;

　　flex-shrink: 3;

　　}

　　最終效果:

　　讓我們來總結(jié)一下

　　項(xiàng)目的屬性(添加在子元素身上的屬性)

　　· Order屬性

　　order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。

　　.item {

　　order:;

　　}

　　· flex-basis屬性

　　flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間(main size)。

　　.item {

　　flex-basis:| auto; /* default auto */

　　}

　　· align-self屬性

　　align-self屬性允許單個項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

　　.item {

　　align-self: auto | flex-start | flex-end | center | baseline | stretch;

　　}

　　· flex-grow屬性

　　flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

　　.item {

　　flex-grow:; /* default 0 */

　　}

　　· flex-shrink屬性

　　flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

　　.item {

　　flex-shrink:; /* default 1 */

　　}