由於element-ui中好多佈局用到了flex，所以來學習一下flex佈局和rem佈局，之前跳過了。

移動端常見佈局

移動端技術選型

移動端佈局和以前學習的PC端有所區別

一、流式佈局（百分比佈局）

• 流式佈局，就是百分比佈局，也稱非固定畫素佈局
• 通過盒子的寬度設定成百分比來根據螢幕的寬度來進行伸縮，不受固定畫素的限制，內容向兩側填充。
• 流式佈局方式是移動web開發使用的比較常見的佈局方式
  
• max-width 最大寬度（max-height 最大高度）
• min-width 最小寬度（min-height 最小高度）

二、flex伸縮佈局

1）傳統佈局和flex佈局

2）佈局原理

flex是flexible box的簡寫，意為“彈性佈局”，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為flex佈局。

• 當把父盒子設為flex佈局後，子元素的float、clear和vertical-align屬性將失效
• 伸縮佈局 = 彈性佈局 = 伸縮盒佈局 = 彈性盒佈局 = flex佈局

採用Flex佈局的父盒子稱為Flex容器（flex container），簡稱“容器”；
裡面的所有子元素自動成為容器的成員，稱為Flex專案（flex item），簡稱“專案”。
原理：通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式

3）常見的父項屬性（6個）

• flex-direction：設定主軸的方向（重點）
  flex佈局中分為主軸和側軸./ 行和列 / x軸和y軸，預設的主軸方向是
  

屬性	說明
row	預設值從左到右
row-reverse	從右到左
column	從上到下
column-reverse	從下到上

• justify-content：設定主軸上的子元素排列方式（重點）

屬性	說明
flex-start	預設值從頭部開始 如果主軸是x軸，則從左到右
flex-end	從尾部開始排列
center	在主軸居中對齊（如果主軸是x軸，則水平居中）
space-around	平分剩餘空間
space-between	先兩邊貼邊，再平分剩餘空間（重要）

• flex-wrap：設定子元素是否換行(重點)
  預設情況下，專案都排在一條線上，預設不換行。

屬性	說明
nowrap	預設值，不換行
wrap	換行

• align-items：設定側軸上的子元素的排列方式（單行）（重點）
  該屬性是控制子元素在側軸上的排列方式，在子元素為單項是使用。

屬性	說明
flex-start	預設值，從上到下
flex-end	從下到上
center	垂直居中（元素集中）
stretch	拉伸

• align-content：設定側軸上的子元素的排列方式（多行）,單行無效果。

屬性	說明
flex-start	預設值，從側軸的頭部開始排列
flex-end	從側軸的尾部開始排列
center	在側軸中間顯示
space-around	子項在側軸平分剩餘空間
space-between	子項在側軸先分佈在兩頭，再平分剩餘空間（重要）
stretch	設定子項元素高度平分父元素的高度

• flex-flow：複合屬性，相當於同時設定了主軸方式flex-direction和是否換行flex-wrap屬性。

4）常見的子項屬性（3個）

• flex：定義子專案分配剩餘空間，用flex來表示佔多少份數。（重點）

 .box2
        {
            flex: 1;
            background-color: red;
        }

• align-self：控制子項自己在側軸上的排列方式，預設值為auto，繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

.box2
        {
            align-self: flex-end;
            background-color: red;
        }

• order：定義專案的排列順序，數值越小，越靠前，預設為0。

.box2
        {
            order: 1;
            background-color: red;
        }