移動WEB開發之flex布局

2021-10-08 03:06:32 字數 1071 閱讀 9701

flex 是 flexible box 的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性,任何乙個容器都可以指定為 flex 布局。伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局 =flex布局

注意: 使用這個屬性之前一定要確定好主軸是哪個

flex-wrap屬性定義,flex布局中預設是不換行的。

該屬性是控制子項在側軸(預設是y軸)上的排列方式 在子項為單項(單行)的時候使用

設定子項在側軸上的排列方式 並且只能用於子項出現 換行 的情況(多行),在單行下是沒有效果的。

flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性

flex-flow:row wrap;
flex 屬性定義子專案分配剩餘空間,用flex來表示佔多少份數。

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

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

span:nth-

child(2

)

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

注意:和 z-index 不一樣。

.item

移動Web開發之 flex布局

用來為盒裝模型提供最大的靈活性。任何乙個容器都可以指定為flex布局 1 flex direction 設定主軸的方向 屬性值說明 row從左到右 預設值 row reverse 從右到左 column 從上到下 column reverse 從下到上 2 justify content 設定主軸上...

移動web開發 flex布局

container 簡稱 容器 它的所有子元素自動成為容器成員,稱為 flex 專案 flex item 簡稱 專案 總結 就是通過給父盒子新增flex屬性,來控制子盒子的位置和排列方式 flex flow row wrap flex 屬性定義子專案分配剩餘空間,用flex來表示佔多少份數。item...

移動web開發 flex布局

container 簡稱 容器 它的所有子元素自動成為容器成員,稱為 flex 專案 flex item 簡稱 專案 總結 就是通過給父盒子新增flex屬性,來控制子盒子的位置和排列方式 flex flow row wrap flex 屬性定義子專案分配剩餘空間,用flex來表示佔多少份數。item...