flex佈局

基礎知識

box-sizing

　　盒子模型是CSS佈局中的基礎，而在Web端，咱們在寫盒子的長寬（width/height）時，通常都是寫內容區的長寬

　　但實際上，能夠經過box-sizing屬性，修改其值爲border-box或者content-box（默認值）

　　（放示意圖，待補充）

　　通常在移動端用border-box爲多，這樣能夠方便後期的修改

圖標字體

　　移動端開發中，會有各類小的圖片（例如最下方的導購等），這些圖片是能夠用圖標字體代替的，目的是方便改變顏色等樣式

　　這裏可使用阿里的iconfont庫（連接地址）

　　進入以後註冊一個帳號，而後能夠添加項目，把本身須要的圖標添加到購物車，添加完畢後點擊下載，把下載好的內容放到assets文件夾中便可

　　固然也可能出現下載失敗的問題，這時候就複製（未完待續）

 

flex佈局

基本概念

　　flex佈局即彈性佈局，其中採用flex佈局（display屬性值爲flex或inline-flex）的元素爲flex容器，而容器中的全部子元素爲容器成員，稱爲flex項目

　　以下圖（圖片選自慕課網），flex容器中，默認水平方向爲主軸，垂直方向爲交叉軸，主軸和交叉軸都有開始和結束，而每個項目在主軸方向上的寬稱爲主軸空間，交叉軸方向上的高稱爲交叉軸空間

　　

　　默認狀況下，項目是沿着主軸方向排列的

容器屬性

display

　　能夠設置flex和inline-flex兩個屬性值，在沒有設置容器寬度時，flex的容器有着本身的寬度，而inline-flex的容器的寬度由其中的項目決定

flex-direction

　　該屬性決定了項目排列的方向（主軸/垂直軸，正向/反向）

　　默認值爲row（主軸，從左向右排列），也可設置爲row-reverse（主軸，從右向左排列）、column（交叉軸，從上向下排列）、column-reverse（交叉軸，從下向上排列）

flex-wrap

　　該屬性設置了若是一條軸上排列不下全部項目，如何換行

　　默認值爲nowrap（不換行，可是每個項目的尺寸會被壓縮），也可設置wrap（換行）、wrap-reverse（換行，新的行在上方）

　　

flex-flow

　　該屬性爲flex-direction和flex-wrap的綜合，默認值爲row nowrap

justify-content

　　該屬性定義項目在主軸上的排列方式，可是仍然設置在容器上

　　默認值爲flex-start（左側對齊），也能夠設置flex-end（右側對齊）、center（居中對齊）、space-between（兩側頂頭對齊，空格在中間）、space-around（兩側對齊，項目之間等間距）

　　

align-items

　　該屬性定義項目在交叉軸上的排列方式，一樣設置在容器上

　　默認值爲stretch，也能夠設置爲flex-start（交叉軸頂部對齊）、flex-end（交叉軸底部對齊）、center（交叉軸居中對齊）、baseline（文字第一行基線對齊，基線能夠理解成下劃線的位置）

　　

　　其中，若是屬性值爲stretch時，若是項目沒設置高度/設置高度爲auto，則項目高度自動佔滿容器高度

align-content

　　該屬性定義多根軸線在交叉軸上對齊方式，若是隻有一行則不起做用

　　默認值爲stretch（軸線佔滿整個交叉軸），也能夠設置爲flex-start（頂部對齊）、flex-end（底部對齊）、center（垂直居中對齊）、space-between、space-around等