# flex與移動web
## 視口
+ **視口**：就是瀏覽器顯示頁面內容的屏幕區域，視口可以分為**布局視口**，**視覺視口**和**理想視口**。
+ 布局視口：layout viewport
+ 一般移動設備的瀏覽器都默認設置了布局視口，用於解決早起的pc端頁面在手機上顯示的問題
+ IOA、Android 基本都將這個視口分辨率設置為980px，所以PC上的網頁大多數都能在手機上呈現。只不過元素看上去很小，一般默認可以通過手動縮放網頁。
+ 視覺視口： visual viewport
+ 字面意思，它是用戶正在看到的網站的區域，注意：是網站的區域。
+ 我們可以通過縮放去操作視覺視口，但不會影響視口，布局視口仍保持在原來的寬度。
+ 理想視口 ideal viewport
+ 為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定。
+ 理想視口，對設備來講，是最理想的視口尺寸。
+ 需要手動添加meta視口標簽同時瀏覽器操作。
+ meta視口標簽的主要目的：布局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多款，我們布局的視口就是多少。
+ meta 視口標簽
+ `<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'`
+ width 寬度設置的是viewport 寬度，可以設置device-width 特殊值
+ initial-scale 初始縮放比，大於0的數字
+ maximum-scale 最大縮放比，大於0的數字
+ minimum-scale 最小縮放比，大於0 的數字
+ user-scalable 用戶是否可以縮放，yes或no （1或0)
## 移動端特殊樣式
+ box-sizing:border-box 邊框和內邊距自動內減
+ -webkit-tap-hightlight-color: transparent 取消點擊的背景高亮顯示
+ -webkit-apprarance:none 取消Safari 瀏覽器 的按鈕和邊框默認樣式
+ img,a{ -webkit-touch-callout: none; } 禁用長按頁面時彈出的菜單
## 移動端技術選型
+ 單獨制作移動端頁面（主流）
+ 流式布局（百分比布局）
+ flex彈性布局（推薦使用）
+ less + rem + （@media）媒體查詢布局
+ 混合布局
+ 響應式頁面兼用移動端（其次）
+ 媒體查詢
+ bootstrap
## flex
### flex 父項中常見的屬性
+ flex-direction: 設置主軸的方向
+ flex-direction: column Y軸排列
+ flex-direction: row-reverse 水平翻轉
+ justify-content: 設置主軸上的子元素排列方式
+ jusify-content: flex-ent 從尾部開始排列
+ justify-content: centent; 子元素居中顯示
+ justify-content: space-around 居中平分剩余空間
+ justify-content: space-between 兩邊貼邊，中間平分剩余空間
+ flex-wrap: wrap 設置子元素可以換行。
+ align-content: 設置側軸上的子元素的排序方式（多行）
+ align-content: flex-start 在側軸的頭部開始排列
+ align-content: flex-end 在側軸的尾部開始排列
+ align-content: center 在側軸中間顯示
+ align-content: space-around 子項在側軸平分剩余空間
+ align-content: space-between 子項在側軸先分布在兩頭，再平分剩余空間
+ align-content: stretch 設置子項元素高度平分父元素高度
+ align-items: 設置側軸上的子元素排列方式（單行）
+ align-items: flex-start 從上倒下 (默認值,一般不需要設置)
+ align-items: flex-end 從下到上
+ align.items: center 擠在一起垂直居中
+ align-items: stretch 拉伸但是子盒子不能設置高度
+ flex:flow: 復合屬性，相當於同時設置了flex-direction 和 flex-wrap
+ flex-direction: column wrap; 縱向排列，內容占滿后換行。
### flex 布局子項常見的順序
+ flex 子項所占的份數，定義子項目分配剩余空間
+ align-self 控制子項目自己在側軸的排列方式，可以讓單個項目與其他項目不一樣的對齊方式，可覆蓋align-items 的屬性
+ 例：`.c17 div:last-child {
*align-self*: flex-end;
}`
+ order 屬性定義子項的排列順訊（前后順序）
+ 例：` .c17 div:nth-child(2) {
*order*: -1;
}`