1. 程式人生 > >flex彈性佈局

flex彈性佈局

以下是彈性佈局的一些知識點,很簡單,易懂!

語法:屬性: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:如何專案未設定高度,將佔滿整個容器

    完結!!!