彈性盒子的梳理 （個人筆記）
1.誰是彈性盒，誰寫（一般是父元素）Display:box 如果不兼容寫：display:-moz-box
Display:-webkit-box;
Display:-o-box;
Display:-ms-box;
Display:box;
2.父元素決定子元素的排列方向 box-orient：horizontal（水平 默認的）
Vertical(垂直排列、縱向)
3.父元素決定子元素的顯示順序 box-direction ：reverse（倒序）
4．依然給父元素設置，父元素決定子元素的對齊方式：
水平對其：box-pack:start center end (左中右)
垂直對齊：box-align： start center end (上中下)
以上四個都是寫給父元素的。
5.子元素設置分配空間
Box-flex：1 2 3 4 寫的數字越大，占空間越大
6.子元素位置的改變：box-ordinal-group:1 2 3 4寫數值，很少用
<meta name=”viewport” content=”width=device-width,initial-scale=1.0”
第三個是初始化縮放，1.0 就是禁止縮放
第二個值是寬度等於設備寬度
第一個是虛擬窗口意思，就是模擬手機等設備
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
當http-equiv="X-UA-Compatible"這句話是遇上IE8的時候以後面最新版本的IE渲染
IE=edge 以最新版本IE顯示 chrome=1 而當機器上安裝的IE沒法渲染就用谷歌瀏覽器的內核進行渲染
彈性盒子手機布局
分為上中下三個部分，山下給固定的高度45px或者44px ，然後讓中間.main部分加上box-flex:1；也就是讓剩余的空間全部給中間；【保證html body 最外層的父親寬高都是100%】
彈性盒布局(懂懂)
給父元素加的屬性:
首先，父元素加上一個display: flex;讓其變成彈性盒 此時,其子元素會默認橫向排列起來，類似浮動的效果
屬性1：flex-direction:(決定子項在flex容器中的位置)
flex-direction: column; 從上到下排列,從父級上面開始[即縱向從上往下排列（頂對齊）]
flex-direction: column-reverse; 從下到上排列（ 最後一個元素在最前面）並且從父級底下開始
flex-direction: row;(默認值) 即橫向從左到右排列（左對齊）
flex-direction: row-reverse; 對齊方式與row相反
屬性2：flex-wrap:(規定子項是否換行)
flex-wrap: nowrap;/*默認樣式，超出不換號，自己平均縮小*/
flex-wrap: wrap;
flex容器為多行。該情況下flex子項溢出的部分會被放置到新行，子項內部會發生斷行
wrap-reverse; 超出部分換行，並且反向 僅僅是行反轉，單個子元素不變
屬性3 flex-flow：/*這個屬性是direction 和wrap的復合屬性*/
屬性4 justify-content 【默認值flex-start 】
justify-content:flex-start; /*子元素左對齊*/
justify-content:flex-end; /*子元素右對齊*/
justify-content: center; /*子元素居中對齊*/
justify-content: space-around;/*//平均分布 兩邊會有間距*/
justify-content: space-between; /*兩邊對齊中間平均分布【兩邊靠邊了，中間的平分】*/
屬性5 align-content: flex-start; 本屬性可以用來調準「伸縮行」在伸縮容器裏的對齊方式，這與調準伸縮項目在主軸上對齊方式的 <‘ justify-content ‘> 屬性類似。請註意本屬性在只有一行的伸縮容器上沒有效果
align-content: flex-start; /*如果父容器高度大的話原本是行之間平分父容器，有空隙. 加上後 行---上對齊*/
align-content: flex-end;
align-content: center;
align-content:space-around;/*讓行平均分布 最上和最底下還是會有中間行空隙的一半*/
align-content: space-between;/*讓行平均分布 最上和最底下無空隙，其余平分空隙*/
align-content: stretch; 『默認值，子元素沒有高度時默認會擴大高度，子元素加起來高度充滿父元素』
屬性6 align-items: 定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
align-items:flex-start; 垂直方向上對齊 左上方
align-items: flex-end; /*垂直方向下對其*/
align-items: center;/*居中對齊*/
align-items:stretch; /*這個屬性是個默認值，如果這個元素的子元素沒有給高度，子元素會垂直充滿容器，給高度的話不起作用*/
align-items: baseline;/*子元素以當前行的首行文字為基準對其*/
加給子元素的
1.Order 默認是0 用整數值來定義排列順序，數值小的排在前面。可以為負值。
2.flex-grow: 1; 分配剩余空間的 默認是0//*把父級元素剩下的分成grow的份數,此元素占的份數，比方說自己都規定了自己的寬度是30，五個子集，父級300，那麽只有一個孩子寫grow的話，這個孩子就是本身的50+（300-150 ）| 如果有有兩個孩子寫了這個屬性一個值是1一個是2 那麽這兩個孩子就是本身的50 加上把剩下的300-150=150分成三份，這倆再分別加上100 （2份的）和50（1份的） */
3.flex-shrink: 0;
用數值來定義收縮比率。不允許負值 默認1
/*當容器寬度不夠,shrink為0的元素不會縮小 shrink為其他的數，是縮小的倍數，（不是它本身定義寬度的一半，而是其它那些經過擠壓後的子元素的）比分說2就是其它的一半，3就是三分之一，所有默認值是1*/
4.flex-basis: 100px; <length>：用長度值來定義寬度。不允許負值
<percentage>：用百分比來定義寬度。不允許負值
auto：無特定寬度值，取決於其它屬性值
content：基於內容自動計算寬度
5.flex是 grow shrink basis的縮寫
6.align-self: flex-end;定義flex子項單獨在側軸（縱軸）方向上的對齊方式。
/*可以控制單個元素的上中下排列方式*/值：auto | flex-start | flex-end | center | baseline | stretch
手機端頁面
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<script>
fontSize();
function fontSize() {
var w = window.innerWidth/10;
var html= document.querySelector("html");
html.style.fontSize=w + "px";
}
// 當窗口的大小發生改變的時候會觸發
window.onresize = fontSize;
</script>
將這段話加上，時時監控窗口大小用的
彈性盒子的梳理 （個人筆記）