Flex 布局 容器屬性

2021-10-20 21:14:33 字數 1632 閱讀 7403

flex 布局,意為「彈性布局」。任何乙個容器都可以指定為 flex 布局,行內元素也可以使用 flex 布局。

注意:設為 flex 布局後,子元素的 float、clear 和 vertrical-align 屬性都將失效。

採用 flex 布局的元素,稱為 flex 容器,簡稱容器;它的所有子元素自動成為容器成員,稱為 flex 專案,簡稱專案。

容器預設的存在兩根軸:水平的主軸和垂直的交叉軸。專案預設沿主軸排列。單個專案佔據的主軸空間叫做 main size,佔據的交叉軸的空間叫做 cross size。

flex-direction 屬性flex-direction 屬性決定主軸的方向(即專案的排列方向)。

flex-wrap 屬性預設情況下,專案都排在一條線(又稱「軸線」)上。flex-warp 定義,如果一條軸線排不下,如何換行。

flex-flow 屬性flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的簡寫形式,預設值是 row nowrap。

justify-content 屬性

justify-content 屬性定義了在主軸上的對齊方式。

.box
假設主軸為從左到右。

align-items 屬性align-items 屬性定義專案在交叉軸上的對齊方式。

.box
假設交叉軸從上到下。

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

關於flex布局容器屬性

容器屬性 flex direction 決定主軸的方向 row 從下到上 row reverse 從上到下 column 從左到右 column reverse 從右到左 flex wrap 如果一行排列不下如何換行 nowrap 不換行 wrap 換行 wrap reverse 換行,第一行在下面...

Flex布局 容器屬性(總結)

y豎向x橫向 元素的排列方向 flex direction row 預設樣式,從左到右排列 flex direction row reverse 從右到左排列 flex direction column 從下到上排列 flex direction column reverse 從下到上排列 設定是否...

flex布局 容器內item屬性

1 order 1 flex布局內item元素沒有指定order屬性時,預設值都是0。2 flex布局內排列子item是根據每個子item的order值大小排列的,order值越小越靠前。2 flex grow 和android裡的weight屬性類似 1 所有子item的flex grow預設值都...