說說彈性佈局

彈性佈局

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

概念和語法

基本設置佈局

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

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

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

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

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

特色code

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

容器中的屬性

  1. 設置主軸方向it

    flex-direction:
       取值:row,默認值,主軸是x軸,主軸起點是左端
       row-reverse,  主軸是x軸,主軸起點是右端
       column,主軸是y軸,主軸起點在頂部
       column-reverse,主軸是y軸,主軸起點在底部
  2. 設置項目的換行顯示io

    flex-wrap:
       取值:nowrap 默認值,空間不夠時,也不換行,項目自動縮小
       wrap 空間不夠就換行
       wrap-reverse 換行,並反轉
  3. 上面兩項屬性能夠縮寫成容器

    flex-flow:
  4. 定義項目在主軸上的對齊方式語法

    justify-content:
       取值:flex-start,默認值,以主軸起點對齊
       flex-end,以主軸終點對齊
       center  在主軸上居中對齊
       space-between 兩端對齊,兩端無空白
       space-around 每一個間距大小相同,兩邊會留白
  5. 定義項目在交叉軸上的對齊方式float

    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的值

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

不努力 就淘汰

相關文章
相關標籤/搜索