小程序入門到精通（三）：學小程序必備技術基礎-flex佈局

學小程序我們需要有點html、css、js基礎，而flex佈局是我們小程序常用的css佈局，學習小程序之前，我們需要了解一些css方面的佈局知識-Flex佈局，Flex 佈局將成爲未來佈局的首選方案

1. flex 佈局是什麼

Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。

2. flex佈局體驗

2.1 傳統佈局與flex佈局

傳統佈局

兼容性好
佈局繁瑣
侷限性，不能再移動端很好的佈局

flex佈局

操作方便，佈局極爲簡單，移動端應用很廣泛
pc端瀏覽器支持情況較差
ie11或者更低版本，不支持或僅部分支持

2.2 初體驗

html結構：

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

	.container{
		display: flex;
		height: 300px;
		width: 80%;
		background-color: red;
		justify-content: space-around;
	}
	.container span{
		background-color: blue;
		/* width: 150px; */
		height: 100px;
		margin-right: 10px;
		flex: 1;
	}

效果如下圖：

3. flex佈局原理

3.1 佈局原理

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

當我們爲父盒子設爲flex佈局以後，子元素的float、clear和vertical-align屬性將失效。
flex佈局可以簡稱：伸縮佈局=彈性不見=伸縮盒佈局=彈性盒佈局=flex佈局

採用flex佈局的元素，稱爲flex容器（flex container）,簡稱“容器”。它的所有子元素自動成爲容器成員，稱爲flex項目（flex item）,簡稱“項目”。

拿上面的例子來說明：

體驗中div就是flex父容器。
體驗中span就是子容器flex項目
子容器可以橫向排列也可以縱向排列

[
flex佈局原理：通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式

4. flex佈局父項常見的屬性

#### 4.1 常見的父項屬性
父元素設置的常見6個屬性：

flex-direction: 設置主軸的方向
justify-content: 設置主軸上的子元素排列方式
flex-wrap: 設置子元素是否換行
align-content: 設置側軸上的子元素的排列方式（多行）
aling-items: 設置側軸上的子元素排列方式（單行）
flex-flow:複合屬性，相當於同時設置了flex-direction和flex-wrap

4.2 flex-direction設置主軸的方向

主軸與側軸

在flex佈局中，是分爲主軸和側軸兩個方向，同樣的說法：行和列、x軸和y軸

默認的主軸方向就是x軸方向，水平方向
默認的側軸方向就是y軸方向，水平向下

屬性值

flex-direction屬性決定主軸的方向（即項目的排列方向）
注意：主軸和側軸是會變化的，就看flex-direction設置誰爲主軸，剩下的就是側軸，而我們的子元素是跟着主軸來排列的。

利用上面的html結構，我們重新寫樣式效果

.container{
 	/* 給父元素添加flex 屬性 */
		display: flex;
		height: 300px;
		width: 80%;
		background-color: red;
  /*默認的主軸是x軸,子元素跟着主軸從左到右排列*/
  /*flex-direction: row;*/
  /*我們可以把我們的主軸設置爲與軸，那麼x軸就成爲了側軸,子元素沿着主軸的方向從上到下排列*/
  flex-direction: column;
	}
	.container span{
		background-color: blue;
	 width: 150px; 
		height: 100px;
		margin-right: 10px;
	}

4.3 justify-content 設置主軸上的子元素排列方式

justify-content屬性定義了項目在主軸上的對齊方式
注意：使用這個屬性之前一定要確定好主軸是哪個

下面用案例說明：
html結構

<div class="container">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
	</div>

css樣式效果：

.container{
 	/* 給父元素添加flex 屬性 */
		display: flex;
		height: 300px;
		width: 800px;
		background-color: red;
	/*默認的主軸是x*/
	flex-direction: row;
	/* justify-content是設置主軸上子元素的排列方式 */
	/*讓元素居中對齊*/
	/* justify-content:center; */
	/*平均分配剩餘空間*/
	/* justify-content: space-around; */
	/*先貼兩邊，再分配剩餘空間*/
	justify-content: space-between;
	}
	.container span{
		background-color: blue;
		width: 150px;
		height: 100px;
		/* margin-right: 10px; */
	}

當cssy軸變爲主軸的時候：

.container{
 	/* 給父元素添加flex 屬性 */
		display: flex;
		height: 800px;
		width: 800px;
		background-color: red;
	/*默認的主軸是x*/
	flex-direction: column;
	/* justify-content是設置主軸上子元素的排列方式 */
	/*讓元素居中對齊*/
	/* justify-content:center; */
	/*平均分配剩餘空間*/
	/* justify-content: space-around; */
	/*先貼兩邊，再分配剩餘空間*/
	justify-content: space-between;
	}
	.container span{
		background-color: blue;
		width: 150px;
		height: 100px;
		/* margin-right: 10px; */
	}

4.4 flex-wrap 設置子元素是否換行

默認情況下，項目都排在一條線上，flex-wrap屬性定義，flex佈局中默認是不換行的。如果裝不下，會縮小子元素寬度，放到父元素裏面。

4.5 align-items 設置側軸上你的子元素排列方式（單行）

該屬性是控制子項在側軸（默認是y軸）上的排列方式，在子項爲單項的時候使用

側軸居中代碼：

.container{
 	/* 給父元素添加flex 屬性 */
		display: flex;
		height: 300px;
		width: 800px;
		background-color: red;
	/*默認的主軸是x*/
	justify-content: center;
	/*側軸居中*/
	align-items: center;
	}
	.container span{
		background-color: blue;
		width: 150px;
		height: 100px;
		margin: 10px;
	}

顯示效果如下圖：

4.6 align-content 設置側軸上的子元素的排列方式（多行）

設置子項在側軸上的排列方式並且只能用於子項出現換行的情況（多行），在單行下是沒有效果的

多行居中效果
代碼如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>flex</title>
<style>
.container{
 	/* 給父元素添加flex 屬性 */
		display: flex;
		height: 300px;
		width: 800px;
		background-color: red;
	/*默認的主軸是x*/
	justify-content: center;
	flex-wrap: wrap;
	/*因爲有了換行*/
	align-content: space-around;
	
	}
	.container span{
		background-color: blue;
		width: 150px;
		height: 100px;
		margin: 10px;
	}
</style>
</head>

<body>
	<div class="container">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
		<span>6</span>
	</div>
</body>
</html>

效果如下：

align-content和align-items區別：

align-items適用於單行情況下，只有上對齊、下對齊、居中和拉伸
align-content適用於多行的情況下（單行情況下無效），可以設置上對齊、配剩餘空間等屬性值。
總結就是單行找align-items多行找align-content

4.7 flex-flow

flex-flow屬性是flex-direction和flex-wrap屬性的複合屬性

flex-flow: row wrap;

5. flex佈局子項常見屬性

flex子項佔份數
align-self控制子項自己在側軸的排列方式
order屬性定義子項的排列順序（前後順序）

5.1 flex 屬性

flex屬性定義子項目分配剩餘空間，用flex來表示佔了多少份數

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>flex</title>
<style>
.container{
 	/* 給父元素添加flex 屬性 */
		display: flex;
		height: 150px;
		width: 60%;
		background-color: red;
		margin: 0 auto;
	}
	.container div:nth-child(1) {
		width: 100px;
		height: 150px;
		background-color: pink;
	}
	.container div:nth-child(2) {
		flex:1;
		height: 150px;
		background-color: green;
	}
	.container div:nth-child(3) {
		width: 100px;
		height: 150px;
		background-color: blue;
	}
</style>
</head>

<body>
	<section class="container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	
	</section>
</body>
</html>

效果如下圖：

5.2 align-self 控制子項自己在側軸上的排列方式

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch.

5.3 order屬性定義項目的排列順序

數值越小，排列越靠前，默認爲0，
注意：和z-index不一樣。

總結

今天只要分享了關於移動端佈局用到的flex佈局，主要是各屬性的用法，如果想了解更多。請掃描二維碼，關注公衆號：