一垢粮、flex彈性概念
彈性盒子是一種用于按行或按列布局元素的一維布局方法物喷。元素可以膨脹以填充額外的空間起宽，收縮以適應更小的空間职车。
(一)主軸與交叉軸
二瘫俊、屬性詳解
（一）容器屬性詳解
-
1、flex容器與flex子項
flex容器與子項.png
容器的屬性與子項的屬性不要互相亂設置悴灵。 2扛芽、
flex-direction屬性: 改變軸方向,包含四個屬性
flex-direction:row|row-reverse|column|column-reverse
row：默認屬性 ,主軸為水平方向，從左到右 积瞒。
row-reverse：主軸水平從右到左川尖。
column：主軸為垂直方向，從上到下茫孔。
column-reverse：主軸為垂直方向叮喳，從下到上。3缰贝、
flex-wrap：換行與縮寫屬性
flex-wrap：nowrap|wrap|wrap-reverse
nowrap:默認馍悟，不進行換行處理
wrap: 根據(jù)父容器高度均分自動換行，從上自下,
wrap-reverse:自動換行剩晴，水平從左到右锣咒，從自下而上用得比較少侵状。
該屬性可以同flex-direction屬性組合使用。靈活布局毅整。4趣兄、
flex-flow: 是 flex-direction 和 flex-wrap 屬性的簡寫方式
語法如下：
flex-flow:<flex-direction>||<flex-wrap>
flex-direction:row（初始值） |row-reverse|column|column-reverse
flex-wrap:nowrap（初始值） |wrap|wrap-reverse
- flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的速記屬性。
- flex-direction 屬性規(guī)定靈活項目的方向悼嫉。
- flex-wrap 屬性規(guī)定靈活項目是否拆行或拆列艇潭。
- IE10 以下和 Safari 不支持此屬性
flex-direction 定義了彈性項目在彈性容器中的放置方向，默認是 row承粤，即行內(nèi)方向（一般而言是由左往右暴区，但注意這個和書寫模式有關）。
flex-wrap 定義是否需要拆行以使得彈性項目能被容器包含辛臊。*-reverse 代表相反的方向仙粱。示例如下
display:flex;
flex-flow:row-reverse wrap;
-
5、
justify-content: 主軸對齊
justify-content:flex-start（默認值） |flex-end|center|space-around|space-between|space-evenly;
flex-start沿著主軸方向起點對齊（默認值）彻舰。從行首起始位置開始排列伐割。
2.flex-end沿著主軸方向結(jié)尾對齊。從行尾位置開始排列刃唤。
3.center沿著主軸方向 居中 對齊隔心。居中排列。
4.space-around沿著主軸方向 間隔對齊尚胞，頭尾有間距硬霍。space-between沿著主軸方向 間隔對齊，頭尾沒有間距笼裳。
6.space-between均勻排列每個元素唯卖，每個元素之間的間隔相等。
<style>
.main {
width: 500px;
height: 500px;
background-color: aqua;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.main div{
width: 100px;
height: 100px;
background-color: pink;
font-size: 20px;
}
</style>
<div class="main">
<!--子項-->
<div>1</div>
<div>2</div>
<div>3</div>
</div>
-
6躬柬、
align-content: 定義了多根軸線的對齊方式
align-content:stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
align-content屬性在彈性容器內(nèi)的各項沒有占用交叉軸上所有可用的空間時（垂直）對齊容器內(nèi)的各項拜轨。
提示：使用 justify-content 屬性對齊主軸上的各項（水平）。
注意：容器內(nèi)必須有多行的項目允青，該屬性才能渲染出效果橄碾。沒有折行，不生效
stretch（默認值）：軸線占滿整個交叉軸颠锉。
center：與交叉軸的中點對齊法牲。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊木柬。
space-between：與交叉軸兩端對齊皆串，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等眉枕。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
如果布局方向為橫向主軸：flex-direction: row;
1速挑、此時 align-content 的變化體現(xiàn)在豎直方向谤牡；
2、如果要讓 align-content: stretch姥宝；生效翅萤，這個時候應該去掉子項的高度或者設置子項的高度為 auto
如果布局方向為縱向交叉軸：flex-direction: column;
1、此時 align-content 的變化體現(xiàn)在水平方向
2腊满、如果要讓 align-content: stretch套么；生效，這個時候應該去掉子項的寬度或者設置子項的寬度為 auto
-
7碳蛋、
align-items屬性: 居中對齊彈性盒的各項 <div> 元素, 用來設置項目在交叉軸方向上的對齊方式
align-items:flex-start|flex-end|center|baseline|stretch(默認值);
flex-start沿著交叉軸方向 起點 對齊（默認值）胚泌。
flex-end沿著交叉軸方向 結(jié)尾 對齊。
center沿著交叉軸方向 居中 對齊肃弟。
baseline沿著交叉軸方向玷室，按照項目內(nèi)的文字對齊。
stretch沿著交叉軸方向自動進行拉升到最大笤受。
align-items 屬性用來設置項目在交叉軸方向上的對齊方式穷缤。
align-items 常用在垂直居中效果實現(xiàn)。
（二）flex子項屬性
-
1箩兽、
flex-grow屬性: 用于設置或檢索彈性盒子的擴展比率津肛。
?注意：如果元素不是彈性盒對象的元素，則 flex-grow 屬性不起作用
flex-grow:number|initial|inherit;
number一個數(shù)字汗贫，規(guī)定項目相對于其他靈活的項目進行擴展的量身坐。
默認值是 0，表示不占用剩的空白間隙擴展自己的寬度芳绩。如果比例值為1掀亥，就沾滿剩余的所有空間。
initial設置該屬性為它的默認值妥色。
inherit從父元素繼承該屬性搪花。
<style>
.box{
width: 300px;
height: 300px;
background-color:blueviolet;
display: flex;
justify-content: center;
align-items: center;
}
.box div{
height:100px;
background: pink;
flex-grow: 1;
}
</style>
<!--容器-->
<div class="box">
<!--子項-->
<div>
測試文字
</div>
</div>
-
2、
flex-shirk屬性: 定義了項目的收縮規(guī)則
flex-shrink主要處理當 flex 容器空間不足時候嘹害，單個元素的收縮比例撮竿。當父元素的寬度小于子元素寬度之和并且超出了父元素的寬度時，flex-shrink就會按照一定的比例進行收縮：將子元素寬度之和與父元素寬度的差值按照子元素flex-shrink的值分配給各個子元素笔呀，每個子元素原本寬度減去按比例分配的值幢踏，其剩余值為實際寬度。
flex元素僅在默認寬度之和大于容器的時候才會發(fā)生收縮许师，其收縮的大小是依據(jù)flex-shrink的值房蝉。
注意：如果元素不是彈性盒對象的元素僚匆，則flex-shrink屬性不起作用。
默認為1搭幻，即如果空間不足咧擂，該項目將縮小。
：
flex-shrink: number|initial|inherit;
number ：一個數(shù)字檀蹋，規(guī)定項目將相對于其他靈活的項目進行收縮的量松申。默認值是 1
initial：設置該屬性為它的默認值。
inherit：從父元素繼承該屬性俯逾。
如果所有項目的 flex-shrink 屬性都為1贸桶，當空間不足時，都將等比例縮小桌肴。
如果一個項目的 flex-shrink 屬性為0皇筛，其他項目都為1，則空間不足時识脆，前者不縮小设联。
