說說彈性佈局

彈性佈局

彈性佈局，是一種佈局方式
主要解決某個元素中子元素的佈局方式
它爲佈局提供了強大的靈活性

概念和語法

基本設置

display: flex;    // 將塊級元素設置爲容器
display: inline-flex    // 將行內元素設置爲容器

這裏出現了容器這個詞，在彈性佈局中有容器和項目的說法

容器：要發生(設置)彈性佈局的子元素，的**父元素**稱爲容器
項目：要作彈性佈局的**子元素們**，稱之爲項目

彈性佈局中也有主軸和交叉軸的概念

項目們排列方向的一條軸(相似座標軸中的x、y軸),就稱爲主軸
和這條主軸垂直相交的軸，就稱爲交叉軸
默認主軸方向是橫向排列，即主軸 -> x軸

特色

當元素設置成彈性容器後，它的全部子元素變成彈性項目
此時項目的float/clear/vertical-align屬性會失效

---

容器中的屬性

1. 設置主軸方向

   flex-direction:
      取值：row，默認值，主軸是x軸，主軸起點是左端
      row-reverse,  主軸是x軸，主軸起點是右端
      column，主軸是y軸，主軸起點在頂部
      column-reverse,主軸是y軸，主軸起點在底部

2. 設置項目的換行顯示

   flex-wrap:
      取值：nowrap 默認值，空間不夠時，也不換行，項目自動縮小
      wrap 空間不夠就換行
      wrap-reverse 換行，並反轉

3. 上面兩項屬性能夠縮寫成

   flex-flow:

4. 定義項目在主軸上的對齊方式

   justify-content:
      取值：flex-start,默認值，以主軸起點對齊
      flex-end，以主軸終點對齊
      center  在主軸上居中對齊
      space-between 兩端對齊，兩端無空白
      space-around 每一個間距大小相同，兩邊會留白

5. 定義項目在交叉軸上的對齊方式

   align-items:
      取值：flex-start 交叉軸起點對齊
      flex-end 交叉軸終點對齊
      center 交叉軸居中對齊
      baseline 交叉軸基線對齊，就是交叉軸起點
      stretch 前提，項目不寫高。佔滿交叉軸上全部的空間

項目中的屬性

只能設置在其中一個項目上，不會影響其餘項目的效果

1. order

   定義項目排列順序，值越小，越靠近起點，默認值爲0
      取值：無單位的整數

2. flex-grow

   定義項目的放大比例
      若是容器有足夠大的剩餘空間，項目將按比例放大
      取值：無單位整數，默認值0，不放大

3. flex-shrink

   定義項目縮小的比例，容器空間不足時，項目該如何縮小
      取值：無單位整數，默認值爲1。
      取值爲0，不縮小。取值越大，縮小越快。

4. flex-basis

   主軸存在剩餘空間時，分配給此項目多少空間，默認auto即自己寬度
      相似height和width寫法

5. 以上三個屬性能夠縮寫爲

   flex:
      默認值是 0 1 auto
      經常使用寫法 flex:1 -> 1 1 auto
      利用這個能夠方便的實現**聖盃佈局**
      轉載一個自認爲不錯的實現方法[css聖盃佈局的實現][1]

1. align-self

   定義當前項目在交叉軸上的對齊方式
     這個屬性會覆蓋掉容器設置的align-items屬性
     取值：flex-start 交叉軸起點對齊
     flex-end 交叉軸終點對齊
     center 交叉軸居中對齊
     baseline 交叉軸基線對齊，就是交叉軸起點
     stretch 前提，項目不寫高。佔滿交叉軸上全部的空間
     auto 使用容器定義的align-items的值

以上就是我對彈性佈局的一些知識點總結，若有異議，煩請告知，謝謝

不努力 就淘汰