flex布局基礎入門總結 專案屬性

2021-09-29 12:17:44 字數 1105 閱讀 4249

order 屬性定義專案的排列順序

數值越小,排列越靠前,預設為0

.div

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

如果所有專案的 flex-grow 屬性都為1,則它們將等分剩餘空間(如果有的話)

如果乙個專案的 flex-grow 屬性為2,其他專案都為1,則前者佔據的剩餘空間將比其他項多一倍

如果有的專案有 flex-grow 屬性,有的專案有 width 屬性,有 flex-grow 屬性的專案將等分剩餘空間

.div

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

如果所有專案的 flex-shrink 屬性都為1,當空間不足時,都將等比例縮小

如果乙個專案的 flex-shrink 屬性為0,其他專案都為1,則空間不足時,前者不縮小

負值對該屬性無效。

.div

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

瀏覽器根據這個屬性,計算主軸是否有多餘空間

它的預設值為auto,即專案的本來大小

.div

flex 屬性是 flex-grow, flex-shrink 和 flex-basis 的簡寫,預設值為0 1 auto

後兩個屬性可選

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

.div

align-self 屬性允許單個專案有與其他專案不一樣的對齊方式,可覆蓋align-items屬性

預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch

.div

{align-self

: auto | flex-start | flex-end | center | baseline | stretch;

flex布局基礎入門總結 容器屬性)

div flex 將物件作為彈性伸縮盒顯示,inline flex 將物件作為內聯塊級彈性伸縮盒顯示 寬度撐開 div row 預設值 主軸為水平方向,起點在左端 row reverse 主軸為水平方向,起點在右端 column 主軸為垂直方向,起點在上沿 column reverse 主軸為垂直方...

細說css3 flex布局之flex專案屬性

在前篇博文中已經詳細敘述了flex布局中的容器屬性,那麼現在就來談談flex專案屬性那些事 以下6個屬性是作用在flex專案上的 1.1 order屬性 該屬性定義專案的排列順序,數值越小,排列越靠前,預設值為0。用法及效果如下 html class flex box class flex item...

Flex布局 彈性布局 基礎入門

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