flex布局很好用，優點很多：靜態流文件，空間概念，主流樣式可以簡單調整，同時支持bfc，空間可以動態分配，專業一維空間布局
這么多優點，所以要提倡使用彈性布局。
空間設置：flex的方向、定位這些可以再父節點設置。
內部單項設置：可擴展，可壓縮，占比，剩余空間占比，獨立對齊。這些需要在子節點設置。
就需要學會配置，可以簡寫的flex-item的屬性：flex-grow | flex-shrink | flex-basis ，另外還有 order | align-self 。
數字和auto，舉個例子：
flex: 1 auto; // flex: auto 效果一樣
瀏覽器解析后是這樣： 兩個可變屬性，被定為1，最后的基本寬高 設置為auto，說明flex的優先級最高的屬性是 flex-basis，以此值為點做調整。
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
none，一類特殊設置：
flex: none; // 失去彈性效果，和 display：block; width: auto; 效果一樣， 注意：設置有 none 再加其他值不合法。
瀏覽器解析后：
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
一個數字的情況：
flex: 1;
瀏覽器解析后： 平時喜歡非子節點都是這上flex: 1，就是這樣的情況，所有item子節點同時參數收縮和增長空間的處理，所以可以按比例划分。
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
兩個數字的情況：
flex: 2 1;
瀏覽器解析后：
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;
三個數字的情況
flex: 2 1 2; // 不合法，基礎值必須是可用的單位，如百分比，px，em這些具體單位。
flex: 2 2 5%; // 嗯，這樣合法。