flex布局及相關屬性

2021-10-07 10:30:32 字數 557 閱讀 5928

flex-direction屬性，決定主軸的方向（即專案的排列方向）。

.box
flex-wrap屬性，預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

.box
flex-flow屬性，flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap

.box
justify-content屬性，定義了專案在主軸上的對齊方式。

.box
align-items屬性，定義專案在交叉軸上如何對齊。

.box
align-content屬性，定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

.box
詳情可見：

flex布局以及相關屬性

容器的屬性 父元素設定display flex 子元素即可使用flex布局。flex direction 決定專案排列方向 flex wrap 一條軸線排不下，如何換行 boxjustify content 專案在主軸上的對齊方式 水平居中時，可以使用這個屬性實現。垂直居中可以用這個屬性實現。ali...

Flex相關屬性

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

彈性布局說明及flex容器屬性

一 彈性布局 說明 a 給元素設定了display flex 後，就成為了彈性盒或者彈性布局 b 當父元素設定了flex後，子元素的float，clear和vertical align將會失效 c 我們把設定display flex 屬性的元素稱之為flex容器，把裡面的子元素稱之為flex專案 d...