彈性佈局,是一種佈局方式
主要解決某個元素中子元素的佈局方式
它爲佈局提供了強大的靈活性css
基本設置佈局
display: flex; // 將塊級元素設置爲容器 display: inline-flex // 將行內元素設置爲容器
這裏出現了容器這個詞,在彈性佈局中有容器和項目的說法flex
容器:要發生(設置)彈性佈局的子元素,的**父元素**稱爲容器 項目:要作彈性佈局的**子元素們**,稱之爲項目
彈性佈局中也有主軸和交叉軸的概念spa
項目們排列方向的一條軸(相似座標軸中的x、y軸),就稱爲主軸 和這條主軸垂直相交的軸,就稱爲交叉軸 默認主軸方向是橫向排列,即主軸 -> x軸
特色code
當元素設置成彈性容器後,它的全部子元素變成彈性項目 此時項目的float/clear/vertical-align屬性會失效
設置主軸方向it
flex-direction: 取值:row,默認值,主軸是x軸,主軸起點是左端 row-reverse, 主軸是x軸,主軸起點是右端 column,主軸是y軸,主軸起點在頂部 column-reverse,主軸是y軸,主軸起點在底部
設置項目的換行顯示io
flex-wrap: 取值:nowrap 默認值,空間不夠時,也不換行,項目自動縮小 wrap 空間不夠就換行 wrap-reverse 換行,並反轉
上面兩項屬性能夠縮寫成容器
flex-flow:
定義項目在主軸上的對齊方式語法
justify-content: 取值:flex-start,默認值,以主軸起點對齊 flex-end,以主軸終點對齊 center 在主軸上居中對齊 space-between 兩端對齊,兩端無空白 space-around 每一個間距大小相同,兩邊會留白
定義項目在交叉軸上的對齊方式float
align-items: 取值:flex-start 交叉軸起點對齊 flex-end 交叉軸終點對齊 center 交叉軸居中對齊 baseline 交叉軸基線對齊,就是交叉軸起點 stretch 前提,項目不寫高。佔滿交叉軸上全部的空間
只能設置在其中一個項目上,不會影響其餘項目的效果
order
定義項目排列順序,值越小,越靠近起點,默認值爲0 取值:無單位的整數
flex-grow
定義項目的放大比例 若是容器有足夠大的剩餘空間,項目將按比例放大 取值:無單位整數,默認值0,不放大
flex-shrink
定義項目縮小的比例,容器空間不足時,項目該如何縮小 取值:無單位整數,默認值爲1。 取值爲0,不縮小。取值越大,縮小越快。
flex-basis
主軸存在剩餘空間時,分配給此項目多少空間,默認auto即自己寬度 相似height和width寫法
以上三個屬性能夠縮寫爲
flex: 默認值是 0 1 auto 經常使用寫法 flex:1 -> 1 1 auto 利用這個能夠方便的實現**聖盃佈局** 轉載一個自認爲不錯的實現方法[css聖盃佈局的實現][1]
align-self
定義當前項目在交叉軸上的對齊方式 這個屬性會覆蓋掉容器設置的align-items屬性 取值:flex-start 交叉軸起點對齊 flex-end 交叉軸終點對齊 center 交叉軸居中對齊 baseline 交叉軸基線對齊,就是交叉軸起點 stretch 前提,項目不寫高。佔滿交叉軸上全部的空間 auto 使用容器定義的align-items的值
以上就是我對彈性佈局的一些知識點總結,若有異議,煩請告知,謝謝
不努力 就淘汰