彈性盒模型解析

彈性盒模型解析

1、什麼是彈性盒模型

一、彈性盒模型是一種更優秀的佈局方式，使用彈性佈局模式可
    以控制子元素排列方式，不須要經過計算控制元素間隙。
    二、彈性盒模型本質是經過兩軸來控制的，一個是換行軸，一個
    是排列方向，開啓彈性模式之後稱之爲彈性容器，內外邊距均可
    以正常使用。

---

2、佈局的默認方式

一、display:block 默認是block-block 對外塊元素對內塊元素
    二、display:inline 默認是inline-inline 對外是行內元素對內行內元素
    三、display:inline-block 對外是行內元素對內是行內元素
    四、display:flex 默認是display:block-flek 對外是塊元素對內是彈性盒模型
    五、display:inline-flek 對外是inline對內是彈性盒模型

---

3、彈性盒模型的特色

一、默認從左往右排列
    二、子元素有了彈性能夠自動伸縮
    三、默認不換行，由於換行須要手動控制

---

4、語法與取值(主軸)

一、父級定義彈性盒模型容器 display:flex; 定義排列方向
    (主軸)flex-direction:row(默認從左到右) row-reverse(從
    右到左排列) culumn(排列從上到下) culumn-reverse(從下到
    上排列)

---

5、換行方式(交叉軸 輔軸)

一、默認是不換行，而且均分子元素寬高。
    二、flex-warp:warp;(正常換行 向右 向下) flex-
    warp:warp-reverse(反向換行 向上 向左) 默認nowrap不換行。

---

總結:

一、無論任什麼時候候，主軸永遠垂直與交叉軸
       二、flex-warp: 主軸 交叉軸;(是主軸與交叉軸的簡寫方式)
       三、子元素不設置寬的時候由內容撐開
       四、子元素不設置高的時候等比例填充
       五、不設置寬高由內容撐開

---

6、(justify-centent)主軸的布方案

一、just-centent:flex-start(默認 主軸的開始位置) 
    二、just-centent:flex-ent(主軸結束的位置)
    三、just-centent:center(主軸元素居中排列)
    四、just-centent:space-around(空白元素均分給子元素而且子元素空白是父元素的兩倍)
    五、just-centent:space-between(只有子元素有間距)
    六、just-centent:space-evenly(父元素與之元素間距相等)

7、交叉軸的佈局方案

Ⅰ、align-items(每個子元素在交叉軸如何對齊的排列方式)
    彈性之一:不換行的時候元素在主軸會擠在一塊兒
    彈性之二:元素在交叉軸方向上實際上是有彈性的,當咱們不設置高
    度的時候元素的高度會按照行數均分
 Ⅱ、語法及可選值
    一、align-items:stretch(默認值 拉伸)
    二、align-items:flex-start(元素不會拉伸沿着交叉軸開始位
    置對齊)
    三、align-items:flex-end(元素沿着交叉軸終點位置對對齊)
    四、align-items:flex-center(元素沿着交叉軸居中對齊)
    五、align-items:baseline(子元素基線對齊)
    
  Ⅰ、align-content(總體子元素在交叉軸的對齊方式 空白處理 多行元素處理)
  Ⅱ、語法及可選值
    一、align-content:flex-start;(元素在交叉軸開始位置對齊)
    二、align-content:flex-end;(元素在交叉軸位置對齊排列)
    三、align-context:center;(元素在交叉軸中間位置對其排列)
    四、align-content:space-between;(各行在交叉軸空間均分，而且只有子元素有空隙)
    五、align-content:space-around;(各行在交叉軸空間子元素空隙是父元素的兩倍)
    六、align-content:space-evenly;(各行在交叉軸上只有子元素有空隙)

---

彈性盒模型之子元素樣式

1、什麼是彈性盒模型子元素樣式？
        一、彈性盒模型子元素樣式是設置在彈性容器裏面的子元素樣式。
    2、樣式語法及可選值
        一、order:1;(默認值0 改變彈性容器裏面子元素的位置，
        值越小排在越前面，值相同則按照元素前後順序)
        二、flex-grow:1;(默認值0 彈性容器子元素的膨脹係數，
        只有多餘空間才能夠分配，若是值小於1怎按百分比分配大
        於1所有分配)
        三、flex-shrink:1;(默認值0 ，彈性容器子元素的收縮系
        數 值越大收縮越厲害)
        四、flex-basis:0px;(設置子元素在主軸方向上指定長度)
     3、複合樣式
        一、flex: 膨脹 壓縮 基礎;
        二、可選值:
            一、auto（計算值爲 1 1 auto）
            二、initial（計算值爲0 1 auto）
            三、none（計算值爲 0 0 auto）
            四、inherit（從父元素繼承）

彈性盒模型之兼容性

1、舊版本flex寫法
        一、最先:display:box;
        二、過分:display:flex box;
        三、標準:display:flex;
    2、兼容寫法
        一、-webkit-
        二、....