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

時間  2020-05-31
標籤 程序 入門 精通 必備 技術 基礎 flex 佈局 欄目 Flex 简体版
原文   原文鏈接

學小程序咱們須要有點html、css、js基礎，而flex佈局是咱們小程序經常使用的css佈局，學習小程序以前，咱們須要瞭解一些css方面的佈局知識-Flex佈局，Flex 佈局將成爲將來佈局的首選方案css

1. flex 佈局是什麼

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

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;
	}
複製代碼

效果以下圖：
學習

image.png

3. flex佈局原理

3.1 佈局原理

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

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

採用flex佈局的元素，稱爲flex容器（flex container）,簡稱「容器」。它的全部子元素自動成爲容器成員，稱爲flex項目（flex item）,簡稱「項目」。

拿上面的例子來講明：ui

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

image.png

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

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

4.1 常見的父項屬性

父元素設置的常見6個屬性：spa

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

4.2 flex-direction設置主軸的方向

  1. 主軸與側軸

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

  • 默認的主軸方向就是x軸方向，水平方向
  • 默認的側軸方向就是y軸方向，水平向下
  1. 屬性值

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

image.png

利用上面的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屬性定義了項目在主軸上的對齊方式
注意：使用這個屬性以前必定要肯定好主軸是哪一個

image.png

下面用案例說明：
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; */
	}
複製代碼

image.png

當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; */
	}
複製代碼

image.png

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

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

image.png

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

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

image.png

側軸居中代碼： 

.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;
	}
複製代碼

顯示效果以下圖：

image.png

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

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

image.png

多行居中效果
代碼以下： 

<!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>

複製代碼

效果以下：

image.png

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>

複製代碼

效果以下圖：

image.png

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

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

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

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

總結

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

qrcode_for_gh_4d3763fa9780_258 (1).jpg
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程