flex的使用方法

2021-10-04 22:47:16 字數 1600 閱讀 9996

flex 是 flexible box 的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性。

任何乙個容器都可以指定為 flex 布局。

.box
行內元素也可以使用 flex 布局。

.box

webkit 核心的瀏覽器,必須加上-webkit字首。

.box

注意,設為 flex 布局以後,子元素的float、clear和vertical-align屬性將失效。

flex容器的6個屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

1. flex-direction:決定主軸的方向(即專案的排列方向)。

2. flex-wrap:預設情況下,專案都排在一條線(又稱"軸線")上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。

3. flex-flow: flex-direction || flex-wrap

4. justify-content: 定義了專案在主軸上的對齊方式(橫行對齊方式)。

5. align-items: 屬性定義專案在交叉軸上如何對齊(縱向對齊方式)。

6. align-content: 屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用(縱向對齊方式)。

7. flex-grow:定義專案的放大比例,預設為0,即如果存在剩餘空間,也不放大。

8. flex-shrink:定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。

9. flex-basis:定義了在分配多餘空間之前,專案佔據的主軸空間(main size)。

瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto,即專案的本來大小。

它可以設為跟width或height屬性一樣的值(比如350px),則專案將佔據固定空間。

10. flex:是flex-grow, flex-shrink 和 flex-basis的簡寫,預設值為0 1 auto。後兩個屬性可選。

該屬性有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)。

11. align-self:允許單個專案有與其他專案不一樣的對齊方式,可覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch。

12. order:定義專案的排列順序。數值越小,排列越靠前,預設為0。

13. 專案的屬性

Flex屬性使用方法

flex是flexible box的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。採用flex布局的元素,稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員,稱為flex專案 flex item 簡稱 專案 任何乙個容器都可以指定為flex布局 注意,...

Flex自定義事件和元件的使用方法

在flex中使用自定義事件和元件可以使 變得簡潔清晰,需要注意的兩點是在自定義事件中要重寫clone方法,返回自定義事件物件 在自定義元件中要在metadata中,宣告元件事件的名字和型別。自定義事件loginevent.as的 如下 package events override public f...

pythonpip使用方法 pip使用方法整理

匯出專案已安裝的pip包 pip list 檢視專案中安裝的包 pip freeze requirements.txt 將專案中所用到的第三方庫輸出到requirements.txt中 pip install 版本號 pip install i 本次使用清華源進行安裝 離線安裝第三方庫 一鍵安裝整個...