flex語法摘要

2021-09-24 20:57:40 字數 1597 閱讀 7549

容器的屬性:

名稱/值

flex-direction(方向)

flex-wrap(是否換行)

justify-content(間隔方式)

align-items(對齊方式)

align-content(多軸線對齊方式)

row(預設值):主軸為水平方向,起點在左端

nowrap(預設):不換行

flex-start(預設值):左對齊

flex-start:交叉軸的起點對齊。

flex-start:與交叉軸的起點對齊。

row-reverse:主軸為水平方向,起點在右端。

wrap:換行

flex-end:右對齊

flex-end:交叉軸的終點對齊。

flex-end:與交叉軸的終點對齊。

column:主軸為垂直方向,起點在上沿。

wrap-reverse:換行:第一行在下方

center: 居中

center:交叉軸的中點對齊。

center:與交叉軸的中點對齊。

column-reverse:主軸為垂直方向,起點在下沿。

space-between:兩端對齊,專案之間的間隔都相等

baseline: 專案的第一行文字的基線對齊。

space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。

space-around:每個專案兩側的間隔相等

stretch(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。

space-around:每根軸線兩側的間隔都相等。

stretch(預設值):軸線佔滿整個交叉軸。

專案的屬性:名稱

描述值/描述

order

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

integer

flex-grow

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

如果所有專案的flex-grow屬性都為1,則它們將等分剩餘空間(如果有的話)。如果乙個專案的flex-grow屬性為2,其他專案都為1,則前者佔據的剩餘空間將比其他項多一倍。

flex-shrink

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

如果所有專案的flex-shrink屬性都為1,當空間不足時,都將等比例縮小。如果乙個專案的flex-shrink屬性為0,其他專案都為1,則空間不足時,前者不縮小。

負值對該屬性無效。

flex-basis

定義了在分配多餘空間之前,專案佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto,即專案的本來大小。

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

align-self

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

該屬性可能取6個值,除了auto,其他都與align-items屬性完全一致。

Flex精華摘要 基本語法

flex基本語法 絕大多數mxml標識符合as3.0規範,mxml檔案編譯產生的swf檔案包含相應的as物件。as3.0是一種物件導向的語言,符合ecmascript第4版規範。mxml檔案的命名規範 1 必須符合as的命名規範,以字母或下劃線開頭 2 不得使用as的類名 元件id標識和命名空間的m...

Flex布局語法

flex 是 flexible box 的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。box 行內元素也可以使用 flex 布局。box webkit 核心的瀏覽器,必須加上 webkit字首。box 注意,設為 flex 布局以後,子元素的flo...

Flex布局語法

container 複製 採用flex布局的元素,稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員,稱為flex專案 flex item 簡稱 專案 設定在容器上的屬性 container 複製 container 複製 container 複製 假設主軸從...