移動web開發 flex布局

2022-01-20 18:00:21 字數 1970 閱讀 8202

目錄2.0 flex布局原理

3.0 父項常見屬性

4.0 flex布局子項常見屬性

總結:就是通過給父盒子新增flex屬性,來控制子盒子的位置和排列方式

注意: 主軸和側軸是會變化的,就看 flex-direction 設定誰為主軸,剩下的就是側軸。而我們的子元素是跟著主軸來排列的

示例:

123

flex-direction:row(不設定,預設)

示例:

12

7

flex-wrap: nowrap;(預設)

flex-wrap: 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布局

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...

移動Web開發 flex布局

1.相容性好 2.布局繁瑣 3.侷限性,不能在移動端很好地布局 1.操作方便,布局極 為簡單,移動端應用很廣泛 2.pc端瀏覽器支援情況較差 3.ie11或更低版本,不支援或僅支援部分 1.如果是pc端介面布局,還是使用傳統布局 2.如果是移動端或者不考慮相容性問題的pc端介面布局,我們還是使用fl...