Flex布局語法

2021-09-24 06:33:27 字數 1005 閱讀 5372

.container 

複製**

採用flex布局的元素,稱為flex容器(flex container),簡稱「容器」。

它的所有子元素自動成為容器成員,稱為flex專案(flex item),簡稱「專案」。

設定在容器上的屬性

.container 

複製**

.container 

複製**

.container 

複製**

假設主軸從左到右

.container 

複製**

假設交叉軸從上到下

.container 

複製**

.container 

複製**

設定在專案(也就是子元素)上的屬性

.item 

複製**

.item 

複製**

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

.item 

複製**

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

.item 

複製**

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

.item 

複製**

.item 

複製**

Flex布局語法

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

flex 布局 語法

flex布局概念 用法 box 複製 容器預設存在兩根軸 水平的主軸和垂直的交叉軸。株洲開始的位置叫做 main start,結束位置叫做 main end 交叉軸開始的位置叫做 cross start,結束的位置叫做 cross end。專案預設沿主軸排列,單個專案佔據的主軸空間叫做 main s...

flex布局 語法

display布局 flex 塊級元素 獨佔一行 它的寬高可以設定 inline flex 行內元素 可以同一行,寬高不能設定 flex direction 主軸的方向 row 水平 row reverse 水平取反 column 垂直 column reverse 垂直取反 justify con...