flex彈性佈局
阿新 • • 發佈:2019-07-20
以下是彈性佈局的一些知識點,很簡單,易懂!
語法:屬性:display
取值:
- flex:當前元素充當彈性佈局的容器,並且本身以塊級元素顯示。
- inline-flex:當前元素充當彈性佈局的容器,並且本身以行內元素顯示。
概念:
- 容器:容納彈性佈局中子元素的父元素。
- 專案:容器中的子元素
注意:元素一旦變為彈性佈局的元素後,float,clear,vertical-align,text-align都失效,定位屬性是有效的!
接下來就是彈性佈局的核心:彈性佈局的屬性。彈性佈局的屬性分為容器的屬性和專案的屬性。
容器的屬性:
- flex-direction:定義容器的主軸方向
- row 預設,主軸水平,從左到右
- row-reverse主軸水平,從右到左
- column主軸垂直,從上到下
- column-reverse主軸垂直,從下到上
- flex-wrap:如果專案在容器中一行顯示不下的方式
- norwap:預設不換行,專案自壓縮
- wrap:換行
- wrap-reverse:專案在交叉軸上的換行
- flex-flow:以上兩個屬性的簡寫,取值有兩個
- justify-content:專案在主軸方向上的對其方式
- flex-start:在軸的起點對齊
- flex-end:末尾段對齊
- center:居中對齊
- space-between:專案與專案之間的距離相等
- space-around:專案兩側的剩餘空間相等
- align-items:專案交叉軸的對齊方式
- flex-start:在軸的起點對齊
- flex-end:末尾段對齊
- center:居中對齊
- baseline:基線對齊
- stretch:如何專案未設定高度,將佔滿整個容器
- align-content:如果有多跟軸線(需要換行),軸線的對齊方式
- flex-start:在軸的起點對齊
- flex-end:末尾段對齊
- center:居中對齊
- space-between:專案與專案之間的距離相等
- space-around:專案兩側的剩餘空間相等
- stretch:佔滿整個軸線
專案的屬性:
- order:順序,取值為整數,預設所有專案取值為0,取值越小越往前。
- flex-grow:如果容器有剩餘空間,定義專案的放大比例,將剩餘空間分配給具有此屬性的元素,按比例分配。
- flex-shrink:如果容器有空間不足,定義專案的縮小比例。預設為1,取值為0,不壓縮。
- flex-basis:定義在主軸上的大小,可以覆蓋width/height,預設為auto。
- flex:以上3個屬性的綜合
- align-self:設定當前這個專案的對齊方式,可以覆蓋align-items
- flex-start:在軸的起點對齊
- flex-end:末尾段對齊
- center:居中對齊
- baseline:基線對齊
- stretch:如何專案未設定高度,將佔滿整個容器
完結!!!