flex 布局 語法

2021-09-24 08:21:36 字數 910 閱讀 7539

flex布局概念

用法:

.box

複製**

容器預設存在兩根軸:水平的主軸和垂直的交叉軸。株洲開始的位置叫做 main start,結束位置叫做 main end;交叉軸開始的位置叫做 cross start,結束的位置叫做 cross end。專案預設沿主軸排列,單個專案佔據的主軸空間叫做 main size,佔據交叉空間叫做 cross size

容器的屬性

.box 

複製**

.box

複製**

flex-flow

.box 

複製**

justify-content

.box 

複製**

align-items

.box 

複製**

.box 

複製**

專案的屬性

.item 

複製**

flex-grow

.item 

複製**

flex-shrink

.item 

複製**

flex-basis

.item 

複製**

flex

.item 

複製**

align-self

.item 

複製**

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 複製 假設主軸從...

flex布局 語法

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