1、如果是pc端頁面布局，我們還是使用傳統布局；2、如果時移動端或者不考慮相容性問題的pc端頁面布局，我們使用flex彈性布局；
flex布局原理：就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列順序。
預設主軸為水平從左往右flex-direction: row;
主軸為水平從右往左
flex-direction: row-reverse;
主軸為垂直從上往下
flex-direction: column;
主軸為垂直從下往上
預設主軸為水平從左往右flex-direction: row;
預設值，在主軸開始位置
justify-content: flex-start;
在主軸結束位置對齊
justify-content: flex-end;
在主軸居中對齊
justify-content: center;
在主軸平分剩餘空間
justify-content: space-around;
先兩邊對齊，其他的子專案平分剩餘空間
justify-content: space-between;
預設值，不進行換行flex-wrap: nowrap;
換行效果
flex-wrap: wrap;
預設主軸方向為水平向右flex-direction: row;
flex-direction: column;
justify-content: center;
側軸，預設值就是從上往下載入
align-items: flex-start;
從下往上載入
align-items: flex-end;
從中間載入
align-items: center;
拉伸 align-items: stretch;
/* 預設主軸方向為水平向右 */flex-direction: row;
flex-wrap: wrap;
/* 側軸整體居於開始位置 */
/* align-content: flex-start; */
/* 側軸整體居於結束位置 */
/* align-content: flex-end; */
/* 側軸整體居中 */
/* align-content: center; */
/* 側軸方向拉伸 */
/* align-content: stretch; */
/* 側軸方向平均分布 */
/* align-content: space-around; */
/* 側軸方向，兩邊對齊，中間的行進行平均分布 */
/* align-content: space-between; */
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性flex-flow： row nowrap;
/* 預設主軸方向為水平向右 */
/* flex-direction: row;
/* flex-wrap: wrap; */
/* 可以將主軸方向的設定和子元素是否換行的設定進行合寫 */
flex-flow: column wrap;
/* 側軸整體居中 */
align-content: center;
移動web開發 rem布局
rem單位 rem root em 是乙個相對單位，類似於em，em是父元素字型大小。不同的是rem的基準是相對於html元素的字型大小。比如，根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24px。根html 為 12px html 此時 ...
移動web開發布局
流式布局，就是百分比布局，也稱非固定畫素布局。通過盒子的寬度設定成百分比來根據螢幕的寬度來進行伸縮，不受固定畫素的限制，內容向兩側填充。流式布局方式是移動web開發使用的比較常見的布局方式。設定子項在側軸上的排列方式 並且只能用於子項出現 換行 的情況 多行 在單行下是沒有效果的。flex 屬性定義...
移動web開發 flex布局
container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 總結 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex flow row wrap flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。item...