參考網(wǎng)址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)

/**
 * 參考網(wǎng)址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
 * FlexBox上可以定義的屬性：
 * flex-direction: row | row-reverse | column | column-reverse;//排列方向
 *    row：默認(rèn)，水平排列，起點(diǎn)在左端厢汹。
 *    row-reverse：水平排列，起點(diǎn)在右端敬特。
 *    column：垂直排列，起點(diǎn)在上沿。
 *    column-reverse：垂直排列伟阔，起點(diǎn)在下沿辣之。
 *
 * flex-wrap: nowrap | wrap | wrap-reverse;//換行方式
 *    nowrap：默認(rèn)，不換行皱炉。
 *    wrap：換行怀估，第一行在上方。
 *    wrap-reverse：換行娃承，第一行在上方奏夫。
 *
 * flex-flow: <flex-direction> || <flex-wrap>;
 *    //flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式怕篷，默認(rèn)值為row nowrap
 *
 * justify-content: flex-start | flex-end | center | space-between | space-around;//對(duì)齊方式
 *    flex-start：默認(rèn)历筝，左對(duì)齊。
 *    flex-end：右對(duì)齊廊谓。
 *    center：居中梳猪。
 *    space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等蒸痹。
 *    space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等春弥。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍叠荠。
 *
 * align-items: flex-start | flex-end | center | baseline | stretch;//在交叉軸上如何對(duì)齊匿沛。
 *    flex-start：交叉軸的起點(diǎn)對(duì)齊（容器上沿）
 *    flex-end：交叉軸的終點(diǎn)對(duì)齊（容器下沿）
 *    center：交叉軸的中點(diǎn)對(duì)齊（垂直居中）
 *    stretch：默認(rèn)值，如果項(xiàng)目未設(shè)置高度或設(shè)為auto榛鼎，將占滿(mǎn)整個(gè)容器的高度逃呼。
 *    baseline: 項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊。
 *
 * align-content: flex-start | flex-end | center | space-between | space-around | stretch;//定義了多根軸線(xiàn)的對(duì)齊方式者娱。如果項(xiàng)目只有一根軸線(xiàn)抡笼，該屬性不起作用
 *    flex-start：與交叉軸的起點(diǎn)對(duì)齊（容器上沿）。
 *    flex-end：與交叉軸的終點(diǎn)對(duì)齊（容器下沿）黄鳍。
 *    center：交叉軸的中點(diǎn)對(duì)齊（垂直居中）推姻。
 *    space-between：與交叉軸兩端對(duì)齊，軸線(xiàn)之間的間隔平均分布框沟。
 *    space-around：每根軸線(xiàn)兩側(cè)的間隔都相等藏古。所以，軸線(xiàn)之間的間隔比軸線(xiàn)與邊框的間隔大一倍忍燥。
 *    stretch（默認(rèn)值）：軸線(xiàn)占滿(mǎn)整個(gè)交叉軸拧晕。
 */
.flexBox{
  display:flex;
  flex-flow: row wrap;
  justify-content:space-around;
  align-items:center;
}

/**
 * FlexItem上可以定義的屬性：
 * order: <integer>;
 *    //定義項(xiàng)目的排列順序。數(shù)值越小灾前，排列越靠前防症，默認(rèn)為0。
 *
 * flex-grow: <number>;
 *    //定義項(xiàng)目的放大比例，默認(rèn)為0蔫敲，即如果存在剩余空間饲嗽，也不放大。
 *
 * flex-shrink: <number>;
 *    //定義了項(xiàng)目的縮小比例奈嘿，默認(rèn)為1貌虾，即如果空間不足，該項(xiàng)目將縮小
 *
 * flex-basis: <length> | auto;
 *    //定義了在分配多余空間之前裙犹，項(xiàng)目占據(jù)的主軸空間（main size）尽狠。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間叶圃。它的默認(rèn)值為auto袄膏，即項(xiàng)目的本來(lái)大小。
 *
 * flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
 *    //是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)掺冠，默認(rèn)值為0 1 auto沉馆。后兩個(gè)屬性可選。
 *    //該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)德崭。
 *    //建議優(yōu)先使用這個(gè)屬性斥黑，而不是單獨(dú)寫(xiě)三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值眉厨。
 *
 * align-self: auto | flex-start | flex-end | center | baseline | stretch;
 *    //允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式锌奴，可覆蓋align-items屬性。默認(rèn)值為auto憾股，表示繼承父元素的align-items屬性鹿蜀，如果沒(méi)有父元素，則等同于stretch荔燎。
 *    //該屬性可能取6個(gè)值耻姥，除了auto，其他都與align-items屬性完全一致有咨。
 */
.flexItem1{
  flex:1;
}
.flexItem2{
  flex:2;
}
.flexItem3{
  flex:3;
}
.flexItem4{
  flex:4;
}
.flexItem5{
  flex:5;
}
.flexItem6{
  flex:6;
}