彈性盒屬性和屬性值
彈性盒
Flex容器：采用 Flex 布局的元素的父元素；
Flex項目：释簿；采用 Flex 布局的元素的父元素的子元素
概念：容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start亿驾，結束位置叫做main end芦昔；交叉軸的開始位置叫做cross start迅脐，結束位置叫做cross end。
項目默認沿主軸排列疾嗅。單個項目占據的主軸空間叫做main size媒役，占據的交叉軸空間叫做cross size。
我們要用彈性盒時需要先把元素轉換成彈性盒
設置彈性盒
display: inline-flex;
添加給父元素：
父元素常用代碼總結
/*display: inline-flex;*/
flex-direction:?row; /*自左向右*/
flex-direction:?row-reverse; /*自右向左*/
flex-direction:?column; /*自上向下*/
flex-direction:?column-reverse; /*自下向上*/
/*不換行*/
flex-wrap:?nowrap;
/*換行自左向右*/
flex-wrap:?wrap;
/*翻轉換行自右向左*/
flex-wrap:?wrap-reverse;
/*復合式寫法*/
flex-flow:?row?wrap; ??
/*主軸對齊方式justify-content*/
/*默認值*/
justify-content:?flex-start;
/*終點對齊*/
justify-content:?flex-end;
/*居中對齊*/
justify-content:?center;
/*兩端對齊*/
justify-content:?space-between;
/*自動分配*/
justify-content:?space-around;
/*空間相等*/
justify-content:?space-evenly;
/*側軸對齊方式align-items*/
/*默認值*/
align-items:?stretch;
/*起點對齊*/
align-items:?flex-start;
/*終點對齊*/
align-items:?flex-end;
/*居中對齊*/
align-items:?center;
/*基線對齊*/
align-items:?baseline;
/*多根軸線的對齊方式align-content*/
/*默認值宪迟，自動適配*/
align-content:?stretch;
/*頂部對齊*/
align-content:?flex-start;
/*底部對齊*/
align-content:?flex-end;
/*居中對齊*/
align-content:?center;
/*兩端對齊*/
align-content:?space-between;
/*自動分配*/
align-content:?space-around;
/*空間相等*/
align-content:?space-evenly;
屬性詳細介紹
1、display：flex/inline-flex;
flex:塊級彈性盒;
inline-flex:行內塊級彈性盒;
注意:設為 Flex 布局以后交惯，子元素的float次泽、clear和vertical-align屬性將失效。
彈性盒只針對第一級子元素生效席爽；
2意荤、flex-direction屬性 決定主軸的方向（即項目的排列方向）
默認情況下：主軸的方向是左向右的；
row： 在左向右的方向（默認值）
row-reverse： 翻轉主軸水平方向的位置： 自右向左
column： ?自上而下的方向 (比較常用)
column-reverse：翻轉垂直方向的位置：自下而上的方向
3只锻、flex-wrap屬性玖像，定義子元素是否換行顯示
nowrap： 不換行 (默認值)
wrap： 換行 ?（常用）
wrap-reverse：翻轉wrap顯示
復合式寫法：
flex-flow屬性
是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap;
4齐饮、 justify-content屬性 定義了項目在主軸（）上的對齊方式捐寥。
flex-start：(默認值) ?沿著主軸的起始點對齊的笤昨；
flex-end：沿著主軸的終點對齊的；
center： 沿著主軸的居中位置對齊的握恳；
space-between： ?兩端對齊瞒窒，中間自由分配
space-around：在元素左右自動分配距離
space-evenly;設置元素之間的空隙相等
5、align-items屬性定義側軸方向是如何對齊乡洼。
flex-start：沿著側軸的起始點對齊的崇裁；
flex-end： 沿著側軸的終點對齊的；
center： 沿著側軸的中間位置對齊的束昵；（相對比較常用）
baseline： ?沿著側軸的基線對齊的
stretch（默認值）：拉伸至同父元素一樣高拔稳；
6、align-content屬性定義了多根軸線的對齊方式锹雏。對于單行子元素巴比，該屬性不起作用。
flex-start沒有行間距
flex-end底對齊沒有行間距
center居中沒有行間距
space-between兩端對齊逼侦，中間自動分配
space-around自動分配距離
space-evenly：設置元素之間的空隙相等
stretch默認值匿辩。項目被拉伸以適應容器。 ?當子元素設置了高度后榛丢，在默認位置顯示.
說明：align-content在側軸上執(zhí)行樣式的時候铲球，會把默認的間距給合并。對于單行子元素晰赞，該屬性不起作用
添加給子元素：
1稼病、align-self屬性
Internet Explorer和 Safari 瀏覽器不支持 align-self 屬性
說明：
align-self屬性規(guī)定靈活容器內被選中項目的對齊方式。
注意：align-self屬性可重寫靈活容器的 align-items 屬性掖鱼。
屬性值
auto默認值然走。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"戏挡。
Stretch元素被拉伸以適應容器芍瑞。
Center 元素位于容器的中心。
flex-start 元素位于容器的開頭褐墅。
flex-end元素位于容器的結尾拆檬。
2、order
說明：
number排序優(yōu)先級妥凳，數字越大越往后排竟贯，默認為0，支持負數逝钥。
默認情況下：按照HTML的書寫順序進行排列的屑那；
3、flex-grow
一個數字，規(guī)定項目將相對于其他靈活的項目進行擴展的量持际。
屬性值：是一個數字沃琅，不用加單位
默認值：0； ??不擴展;
屬性值為1的時候就是擴展选酗；
1阵难、2、3芒填、4呜叫、5、6......
flex-grow會改變元素原有的大械钏ァ朱庆；
注：沿著主軸進行變化；
4闷祥、flex-shrink
一個數字娱颊，規(guī)定項目將相對于其他靈活的項目進行收縮的量。
flex-shrink：1凯砍； ??默認值 ： ?1： ?收縮 ????????0：不收縮
5箱硕、flex-basis
項目的長度
flex-basis的權重 大于width；
復合式寫法：flex（比較常用）
flex-grow ??flex-shrink ??flex-basis
flex：1 ???2 ????3 ???4...
說明：
復合屬性悟衩。設置或檢索彈性盒模型對象的子元素如何分配空間
詳細屬性值：
縮寫「flex: 1」, 則其計算值為「1 1 0%」
縮寫「flex: auto」, 則其計算值為「1 1 auto」
flex: none」, 則其計算值為「0 0 auto」
flex: 0 auto」或者「flex: initial」, 則其計算值為「0 1 auto」剧罩，即「flex」初始值
