由於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:設定子元素是否換行(重點)
預設情況下,專案都排在一條線上,預設不換行。
- 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;
}
