前端移動web 布局 flex布局

2021-10-19 14:51:33 字數 1036 閱讀 6812

採用 flex 布局的元素，稱為 flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案（flex

item），簡稱"專案"。

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

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

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

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

span:nth-child(2)
數值越小，排列越靠前，預設為0。

注意：和 z-index 不一樣。

.item
1.技術選型

方案：我們採取單獨製作移動頁面方案

技術：布局採取flex布局

2.搭建相關資料夾

4.常用初始化樣式

body
5.模組名字劃分

web前端布局之flex布局

總的來說，flex布局的原理通過給父元素新增flex屬性，來控制子元素的位置和排列方式。採用flex布局的元素稱為flex容器。flex容器中存在兩條軸，分別為主軸和側軸，容器中的每個單元稱為flex專案。在容器上可以設定6個屬性 分別為 flex direction flex wrap flex ...

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