flex布局以及相關屬性

2022-08-27 02:12:08 字數 1522 閱讀 3953

容器的屬性:

父元素設定display:flex;子元素即可使用flex布局。

flex-direction 決定專案排列方向:

flex-wrap 一條軸線排不下,如何換行

.box
justify-content 專案在主軸上的對齊方式

水平居中時,可以使用這個屬性實現。

垂直居中可以用這個屬性實現。

align-content 多根軸線的對齊方式

專案的屬性:

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

.item
flex-grow 專案的放大比例,預設為0,即存在剩餘空間,也不放大。

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

flex-shrink 縮小比例。即如果空間不足,該專案將縮小。

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

負值對該屬性無效。

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

flex布局及相關屬性

flex direction屬性,決定主軸的方向 即專案的排列方向 box flex wrap屬性,預設情況下,專案都排在一條線 又稱 軸線 上。flex wrap屬性定義,如果一條軸線排不下,如何換行。box flex flow屬性,flex flow屬性是flex direction屬性和fle...

Flex相關屬性

彈性盒布局 display flex display inline flex 兩個元素會在一行顯示 作用 控制子集在 主軸 上排列 顯示規則 所有的子元素都會在主軸上排列 預設x為主軸 如果設定x為主軸,那y為側軸 如果設定y為主軸,那麼x為側軸 設定方法 父元素必須為彈性盒 display fle...

flex布局的屬性

flex布局的核心概念是軸和容器,容器包括外層的父容器和內層的子容器,軸包括主軸 預設水平 和交叉軸 預設垂直 一 開啟flex布局 父容器設定屬性值 display flex 若父容器為行內元素 display inline flex webkit核心的瀏覽器 display webkit fle...