flex布局 語法

2021-10-03 06:37:38 字數 792 閱讀 6603

display布局

flex:塊級元素 (獨佔一行; 它的寬高可以設定)

inline-flex 行內元素(可以同一行,寬高不能設定)

flex-direction(主軸的方向)

row(水平) | row-reverse(水平取反) | column(垂直) | column-reverse(垂直取反)

justify-content(主軸上的水平對齊方式)

flex-start(左邊對齊) | flex-end(右邊對齊) | center(居中) | space-between(兩端對齊)| space-around(間隔相等)

flex-wrap(是否換行)

預設都是在同一行,放不下就收縮

nowrap(預設-不換行) | wrap(換行) | wrap-reverse(換行取反)

align-items(主軸上的垂直對齊方式)

flex-start(上邊對齊) | flex-end(下邊對齊) | center (居中) | baseline (第一行文字對齊)| stretch(auto佔滿高度)

align-centent(多軸對齊方式)

flex-start(上邊對齊) | flex-end(下邊對齊) | center (居中) | space-between(兩端對齊)| space-around(間隔相等)| stretch(auto佔滿高度)

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 布局 語法

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