vue雜記

一

1、數組

Vue數據驅動（主要操做的是數據）

數據類型 number string boolean object null undefined Function symbol(es6)

先後臺交互通常處理 對象{} 數組[]

操做數組的方法(括號中的能改變原數組，數組變異)

ES4  (pop  push  unshift  shift  slice  revert  sort)  indexOf  lastIndexOf contact slice

ES5  forEach filter map some every reduce  

ES6  includes find

聲明式（不關心如何實現）

編程式（關心實現）

forEach

Let arr=[1,2,3,4,5]

//不支持return

arr.forEach(function (item,index){//每一項 索引

 })

forEach ,for in, for ,for of

for in  //key會變成字符類型，包括可枚舉的屬性

for of  //支持return 而且值是of數組（不能遍歷對象）

Let obj={id:1,age:12}  //Object.keys將對象做爲新數組 而後再調用for of

For(let val of Object.keys(obj)){

Obj[val];

}

Filter  刪除項

//是否操做原數組 不  

//返回結果 過濾後的新數組  

//回調函數的返回結果：true，表示這一項放到新數組

Let arr=[1,2,3,4,5]

Let newArr=arr.filter(function(item,Index){

return Item>2&&item<5;

})

Map  更新項

//映射 將原有數組映射成新數組

Let newArr=arr.map(function(item,Index){

return `<li>${item}<li>`;  //``是es6的模板字符串 遇到變量用${}取值

})

includes 查找是否存在

返回的是Boolean

Let arr=[1,2,3,4,5]

arr.includes(6)  //false

FInd    找到具體的某一項

arr.find(function(item,index){   })  //爲true，中止循環返回當前item；找不到返回undefined

Some 找true，找到true後中止返回true

Every 找false，找到false後中止返回false

arr.some(function(item,index){   })  arr.every(function(item,index){   })

Reduce 收斂函數，四個參數，返回迭代後的結果

prev,next,index,item   分別指前一個（即當前值）、下一個、索引、原數組

Let arr=[1,2,3,4,5]

arr.reduce(function(prev,next,index,item){  

Console.Log(arguments)

//return prev+next  //求和，且會做爲下一次的prev，prev是上一次循環的return值

 })

1        2 1 [12345]

Undefined 3 2 [12345]

而對於數組裏存放的是對象的話

Let objArr=[{count:1},{count:2},{count:3}]

Let sum1=objArr.reduce(function(prev,next,index,item){  

return prev.count+next.count  //此時須要return對象，返回下一次循環會報錯

 })

Sum1=NAN

此時須要給數組添加一個初始值0，

Let objArr=[0,{count:1},{count:2},{count:3}] 使用修改成

objArr.reduce(function(prev,next,index,item){  

return prev+next.count  //此時可保證正確累加

 })

或者不改數組，而是在方法添加第二個參數（第一個參數爲function）

objArr.reduce(function(prev,next,index,item){  

return prev+next.count  //此時可保證正確累加

 }，0)

二維數組變成一維數組

Let arr=[[1,2,3],[4,5,6],[7,8,9]]

Arr.reduce(function(prev,next){

Return prev.concat(next);

})

或者

[].concat.apply([],arr)

字符串

charCodeAt方法返回一個整數，表明指定位置字符的Unicode編碼。 

fromCharCode方法從一些Unicode字符串中返回一個字符串。 

charAt方法返回指定索引位置處的字符。若是超出有效範圍的索引值返回空字符串。 

slice方法返回字符串的片斷。

substring方法返回位於String對象中指定位置的子字符串。 

indexOf方法放回String對象內第一次出現子字符串位置。若是沒有找到子字符串，則返回-1。 

search方法返回與正則表達式查找內容匹配的第一個字符串的位置。 Match

concat方法返回字符串值，該值包含了兩個或多個提供的字符串的鏈接。 

將一個字符串分割爲子字符串，而後將結果做爲字符串數組返回。 

toLowerCase,toUpperCase全部字母都被轉換爲小、大寫字母。 

Startwith endwith repeat replace trim  「sss」.padstart(5,」ss」) padend 補全字符串

箭頭函數

不具有this和arguments

本身沒有則向上尋找this

如何更改this指向？ call apply bind ;var self=this;箭頭函數

如何肯定this是誰？ 看誰調用的 .前面是誰this就是誰

Let a= b => b=1

-去掉function關鍵字

-若只有一個參數能夠省略小括號

-小括號與大括號之間有箭頭

-若沒有大括號則直接是返回值

-有大括號須要用return

例子：Let a=b=> c => b+c;   //高階函數 嵌套函數

閉包：單獨的做用域，不銷燬的做用域，當執行後返回的結果必須是引用數據類型，被外界變量接受，此時這個函數不會銷燬，模塊化（私有化）

//典型閉包

var t=function test(){

  var a=1; return function(){console.log(a++)}

 }();

//簡寫函數

arr.forEach(item=> console.log(item))

在Vue中不常用箭頭函數

二、Vue介紹

讀音相似於view 是一套構建用戶界面的漸進式框架

框架 vue 擁有完整的解決方案,寫好後別人調用

庫 jquery 咱們進行調用 工具

漸進加強 保證低版本支持，高版本效果加強

Vue全家桶 vuejs + vue-router + vuex + axios

漸進式的理解(全家桶)

聲明式渲染（無需關心如何實現）

組建系統

客戶端路由

大規模狀態管理

構建工具（vue-cli）  全套完整的方案

Vue的兩個核心點

響應的數據變化

當數據發生改變--視圖自動更新

組合的視圖組件

     Ui頁面映射爲組件樹

     劃分組件可維護可複用可測試

MVC 單向

MVVM模式 雙向綁定

Model數據 view視圖 viewmodel  視圖模型

View         viewmodel             model

DOM      DOM Listeners Data Bindings   plain js objects

                vue

Object.defineProperty(es5) 沒有替代方案 不支持ie8如下

Vue安裝

一、cdn 直接使用網址

二、npm node package manager

npm init

初始化會產生一個package.json的文件來描述項目的依賴，項目名不能有大寫 特殊字符 中文，並且不要和安裝的包重名

npm init -y 所有取默認值，項目名爲文件夾名

npm install vue  install可簡寫爲 -i

Package.json dependencies 會記錄已安裝依賴 npm install 會安裝這些內容

Node_moudules 安裝的代碼  dist表明目的地，即編譯好的內容

Let vm = new Vue({  //vm == viewModel

el:」#app」，    //告訴vue能管理哪一個部分，不能掛載到html body

data:{         //data中的數據會被vm代理

    msg:」hello」 //能夠經過vm.msg取到對應內容

}

});   //Object.defineProperty

{{msg}}  //moustache 小鬍子語法  賦值 取值 三元  邏輯運算用（computed）

v-model雙向綁定

v-mode會將msg的值賦予輸入框 輸入框的值改變了會影響數據

表單元素更改來影響數據（經過vue指令 directive  v-開頭）  

通常的表單元素 input checkbox textarea radio select           vue忽略selected checked

Es5的原生方法

Let obj={}

Let temp={}

Object.defineProperty(obj,’name’,{

Configurable:true,  //是否可刪除 delete obj.name

Wirtable:false,     //是否可從新賦值

Enumerable:false,  //是否可枚舉，能循環出來與否

Value:1           //值

})

<input type=」text」 id=」input」>

Object.defineProperty(obj,’name’,{

get(){

    return temp[「name」];

},

set(val){

    temp[「name」]=val;

input.value=val;  //從新賦值給文本框，雙向綁定

}

})

Input.value=obj.name;   //頁面加載時，調用get方法

Input.addeventlistener(‘input’,function(){   //等待輸入框變化

     obj.name=this.value;  //當時變化時調用set方法

})

Css放上面 先渲dom

Js放下邊  不影響展現

基礎指令

v-model 雙向綁定

v-text 顯示文本 等價{{}}，此時渲染會顯示出{{}} 須要在標籤中加樣式[v-cloak]{display:none}

v-once  只綁定一次，當數據再發生變化也不會致使頁面刷新，加在標籤中

<div v-once>

    {{meg}}

</div>

v-html   看成html渲染

Vue會循環data中的數據（數據劫持） 依次添加proxysetter和proxygetter

響應式數據

改對象

一、使用變量時，先要在data中初始化，不然新加的元素不會致使頁面刷新

二、vm.$set()  //此方法能夠給對象添加響應式的數據變化 vm.$set(vm.a,’school’,1);

三、替換原對象 vm.a={school：5}

改數組

去改變數組中的某一項是監控不到的，由於數組內的元素加不上getter和setter

//錯誤寫法  vm.arr[0]=100  vm.arr.lenth-=2

//變異方法  pop  push shift unshift sort reserve slice 均可以操做原數組，所以可變化

或者 vm.arr=vm.arr.map(item=>item*3)  //filter map

v-for 解決循環問題 更高效 複用原有結構 之前拼接innerHTML

v-for=」(item,index) in arr」 v-for=」c in ‘aaaa’」 v-for=」c in 10」 v-for=」(value,key,index) in obj」

<div onclick=」fn()」 id=」aaa」></div>   此時會傳遞默認值event

v-on  綁定事件  //v-on:click=」fn」  簡寫爲@符號 @click=」fn」

放到methods，methods與data命名不能衝突，methods中的this指向實例

fn（event）此時若@click=」fn」，則會自動帶過來event

fn(event,test) 此時若@click=」fn($event,123)」 須要手動傳入event參數

@keyup.enter=」fn」 表明只有按回車才執行 相似寫法@keyup.13 @keyup.ctrl.a  

二

npm install vue axios bootstrap(響應式佈局)

Checkbox  

只有一個複選框的時候，會把值轉化爲Boolean類型，若是true表明選中

多個複選框的時候，要增長value屬性，數據類型用數組，會將選中的value值放到數組中

<input type=’checkbox’ value=’1’ v-model=」test」>1

<input type=’checkbox’ value=’2’ v-model=」test」>2

<input type=’checkbox’ value=’3’ v-model=」test」>3

test[]  全選中test爲[1,2,3]

Select

<select v-model=」a」>  //取得value的值，若option無value屬性，則取顯示的值

<option value=’’ disabled>請選擇</option>

<option value=’1’>1</option>

<option value=’2’>2</option>

<option value=’3’>3</option>

<select>

傳統方式：監聽onchange事件，this.value 值爲選中option的value

data:{

    a:」」

}

<select v-model=」a」 multiple>  //多項選擇 a變成數組類型

Radio

<input  type=」radio」 v-model=」sex」 value=」1」>男  之前用name屬性

<input  type=」radio」 v-model=」sex」 value=」2」>女

sex爲選中的radio的value值

Axios  基於promise

//專門發送ajax的方法

created(){  //數據初始化後會調用 this指向vm實例，鉤子函數

axios.get(‘./carts.json’).then((res)=>{

this.pro=res.data;    //data爲真實的數據

},(err)=>{

 

})

}

發請求能夠封裝爲方法放到methods方法中，而後在created中調用

Promise 解決回調問題的

//回調函數 將後續處理邏輯傳入當前要作的事，事情處理好之後調用此函數

Function buy(callback){

setTimeout(()=>{

   Let a=’123’;

   Callback(a);

},100);

}

Promise 三個狀態 成功態 失敗態 等待 //定義時即會執行

//resolve 表明轉向成功 reject 表明轉向失敗 均是函數

//promise的實例就有一個then方法，兩個參數

var pro=new Promise((resovle,reject)=>{

console.log(1)

setTimeout(()=>{

   let a=’123’;

   resovle(a);

},100);

});

console.log(2);

pro.then((res)=>{console.log(res)},(err)=>{})

封裝原生ajax請求

function ajax({url=’xxx’,type=’get’,dataType=’json’}){

Return new promise({resolve,reject}=>{

Let xhr=new XMLHttpRequest();

Xhr.open(type,url,true);   //最後參數爲是否異步

Xhr.responseType=dataType;

Xhr.onload=function(){  //xhr.readstate==200;xhr.status=4

    If(xhr.status==200){

Resolve(xhr.response);

}    

}

Xhr.onError=function(err){

    Reject(err);

}

Xhr.send();

})

}

ajax({url:’./aaa’}).then((res)=>{},(err)=>{})

Fetch代替Ajax

Async await 基於promise

Bootstrap 柵格化佈局 默認12列 其餘框架會8 、24

常見樣式 基本樣式 + 加強樣式

Default 灰色 success 綠色 danger 紅 warning 警告 info 淺藍

Vue的ui框架 iview mintui elementui

<table>

<caption>購物車<caption>表格標題

<tr>

<td></td>

</tr>

<table>

動態綁定數據 在屬性裏使用須要用v-bind或：  v-bind:id=」data」

//.number將輸入框值變成數字類型 .lazy當輸入框失去焦點更新數據

<Input type=number v-model.number=」count」 min=1>   

toFiexed(2)兩位小數

過濾器 原數據不變，只是改變顯示的效果 |爲管道符

{{a.price*a.count|toFiexed(2)}}

Filters:{//能夠有好多的自定義過濾器

toFiexed(input，param1){   //這裏的this是window,input爲值

    Return 「$」+input

}

}

兩個對象比較，比較的是地址，所以能夠比較是否相等

點擊checkbox時，用change事件

Sum() 數據一變化就會從新調用此函數 算出最新的結果 不會緩存上一次結果

Computed 也會放到實例上

Computed:{

Checkall:{

    Get(){

    Return this.pros.every(p=>p.isSelected)

},

    Set(val){

    This.pros.forEach(p=>p.isSelected=val)

}

},

Sum(){ }  //只有get可寫成函數模式，且會被緩存

}

V-if v-show if操做的是dom show操做的是樣式

若是if不經過內部指令不會再執行

只有dom從顯示到隱藏 或者隱藏到顯示 才能使用vue的動畫

//Vue自定義標籤 （組件）

<transition><transition>  動畫

Opacity：0          1          1          0

   V-enter        v-enter-to   v-leave     v-leave

           V-enter-active         v-leave-active

V-enter  V-enter-active  v-leave-active

.v-enter{opacity:0;}

.v-enter-active{transition:1s linear;}

.v-leave-active{opacity:0;transition:1s linear}

<transition name=’test’><transition>  name默認爲v

.test-enter{opacity:0;}

.test-enter-active{transition:1s linear;}

.test-leave-active{opacity:0;transition:1s linear}

animate.css 動畫庫  --save 會記錄到package.json 的依賴庫

<transition enter-active-class=’animated fadeInRight’><transition>

transition適用單個元素transition -group適用多個元素

V-for 默認會複用原有的dom元素，要加:key且key不一樣用以區分不一樣元素

三

修飾符.number .lazy

按鍵修飾符 .enter.ctrl.keycode

事件 修飾符用於處理細節問題

@事件.stop    中止事件傳播  stoppropagation cancelBubblel=true

@事件.capture 事件爲捕獲    div.addeventlisenter(‘click’,fn,true(捕獲))

@事件.capture.stop 先捕獲後中止

@事件.prevent 阻止默認行爲  preventDefault returnvalue=true

@事件.once   事件只執行一次 Jquery once

@事件.self    只有事件源是本身才會觸發

e.srcElement&&e.target===」」  判斷事件源綁定 事件

局部過濾器
New vue({

   el:」#app」,

Filters:{

  My(data){ return 「data」+123}

}

})

全局過濾器，要放到頁面的頂部

Vue.filter(「my」,(data)=>{  })

Computed不支持異步

Watch 只有值變化的時候纔會觸發 支持異步，其餘狀況更善於使用computed

New vue({

Watch:{

    a(newval,oldval){

       If(newval.length<3) ....

}

}

})

Vm.$watch(‘a’,(newval,oldval)=>{})

V-if v-else  

<template v-if><template>  transtion

是vue提供的無實際意義包裹元素的標籤 v-show不起效

默認狀況下，切換dom時Vue會複用元素，若是不復用須要加:key

class=」a b c」 style=」background:’color’」

第一種是對象 第二種是數組

:class綁定的樣式和class綁定的不衝突  style使用與class雷同

1  {classname:isActive,classname2:isSuccess}

2  data:{class1:x,class2:y}  :class[class1,class2]

3  混用 :class[class1,class2,{z:false}]

<div class=」x y」 :class={z:flag }」></div>

實現單頁開發的方式

經過hash記錄跳轉的路徑 能夠產生歷史管理

瀏覽器自帶的歷史管理的方法history （history.push）

History.pushState(「」,」」,」/me」) 可能會致使404錯誤

開發時使用hash方式 上線都話會使用history的方式

自定義指令
<button v-color=’flag’><button>

directives:{

color(el,bindings){ //el指代是button按鈕

    el.style.background=bindings.value

}，

Drag(el){

    

}

},

data:{

     flag:’red’

}

拖拽

El.onmousedown=function(e){

Var x=e.pagex-el.offsetLeft;

Var y=e.pageY-el.offsetTop;

document.onmousemove=function(e){

    El.style.left=e.pageX-x+」px」;

    El.style.Top=e.pageY-y+」px」;

}

document.onmouseup=function(){

    document.onmousemove=document.onmouseup=null;

}

e.preventDefault();

}

Watch 默認值監控一層的數據變化，深度監控

Watch:{

Todos:{

    Handler(){ //默認寫出函數，就至關於寫了個handler

 

}，

deep:true

}

}

四

Window.location.hash

Vue的生命週期

New vue

Init events &&lifecycle   初始化事件和實例的父子關係

beforecreate 此方法通常用不到

Init injections&reactivity  註冊數據 進行雙向綁定

Created     執行ajax，獲取數據，初始化操做

是否有el屬性或者有沒有vm.$mount(el)  有編譯的元素

是否有「template」，有則替換掉elhtml元素，不然把el的outhtml作模板

Beforemount

建立vm.$el替換掉el，用編譯好的數據替換掉模板

Mounted   真實dom渲染完畢，能夠操做dom

當data發生變化

Beforeupdate  //通常用watch

虛擬dom會從新渲染

 updated

beforeDestroy //能夠清除定時器或者清楚事件綁定

移除掉watch components等

destroyed

// vm.$data vm上的數據

//this.$watch 監控

//vm.$el當前el元素

// vm.$set 後加的屬性實現響應式變化

// vm.$option vm上的全部屬性

//vm.$refs 獲取真實的dom元素 v-for才能獲取多個<div ref=’div’>

//vm.$nextTick 異步方法，等待dom渲染完獲取元素

數據改變會渲染dom,由於是異步的，若要獲取dom須要使用nextTick

This.nextTick(()=>{

    This.$refs.wrap

})

組件化開發

頁面級組件

1一個頁面是一個組件 2將可複用的部分抽離出來 基礎組建

一個自定義標籤vue就會把他當作一個組件

全局組件

通常插件的時候全局組件多一些

聲明一次在任何地方使用

1組件名不要帶大寫 多個單詞用-

2只要組件名和定義名相同是能夠的(首字母可大寫)

3 html採用-隔開命名，vue中使用駝峯命名

Vue.component(‘name’,{  //一個對象能夠當作一個組件

template:’<div>123</div>’ //只能有一個根元素

data(){  //組件中數據必須是函數類型 返回一個實例做爲組件的函數

    return {}

}  

})

局部組件 必要屬於某個vue實例

使用三部曲 1建立組件 2註冊組件 3使用組件

組件是相互獨立的 不能直接跨做用域 實例也是一個組件 組件擁有生命週期

若是組件共用數據 會致使同時更新(獨立性)，所以data須要使用return

Let aa={

template:’<div>123</div>’

}

Components:{

    aa

}

層級間的消息傳遞 父到子 屬性傳遞props  子到父 事件傳遞$emit

中間既不觸發也不傳遞的爲 v-bing=’@attrs’ v-on=’@listenners’

當前組件的屬性=父級的值，給兒子加一個m屬性，屬性對應的數據是屬於父親的

Let vm=new Vue({

     Compenents:{

         Child:{

    Props:[‘m’],   //對象可添加校驗

    Template:’<div>兒子{{m}}</div>’

}

}

})

Props:{

m:{ //不與data中相同,只是校驗提示警告，不會阻斷程序

    type:[String,Boolean,Number,Array,Function] //校驗屬性類型

    default:100  //能夠賦默認值

    required:true //此屬性必傳，可是不能和default同用

    Validator(val){//第一個參數是當前值，返回值經過，false不經過

    Return val>300  //自定義校驗器

}

}

}  

發佈訂閱   //emit on

Vm.$on  vm.$once  vm.$off  vm.$emit

Function Girl(){  this._events={} }

Girl.prototype.on=function(eventName,callback){

If(this.events[eventName]){

    this.events[eventName].push(callback)

}else{

    this.events[eventName]=[callback]

}

}

Girl.prototype.emit=function(eventName,...args){

    //[].splice.call(argument,1)

If(this.events[eventName]){

    this.events[eventName].forEach(fn=>fn(...args));   //fn.apply(this,args)

}

}

父親綁定一些事件，兒子觸發這個事件，將參數傳遞過去 單項數據流

<children :m=」money」 @click-msg=」changeMoney」><children>

Var vm=new Vue({

data:{

Money:100;

},

Methods:{

    changeMoney(val){

This.money=val;

}

},

Components:{

    Children:{

Props:[「m」],

Template：」<div>錢：{{m}}<button @click=」change」>加錢</button></div>」,

 

Methods:{

Change(){

    This.$emit(「click-mes」,200);

}

}

}

}

})

組件就是自定義標籤 全小寫 或加橫槓

駝峯命名會轉化爲短橫線命名

Props:[‘myMessage’]

<child my-message=」hello!」></child>

Sync 簡寫 不用  

<child :m.sync=’money’></child>  

<child :m=’money’ @update:m=」val=>this.money=val」></child>

模態框 彈出層

居中Top:50%  left:50% trnasform:translate3d(-50%,-50%,0)

<buton @click=」flag=true」>彈</button>

<modal :show=」flag」 @close=」()=>flag=false」><modal>

 

<template id=’mydialog’>

<div class=’mask’ v-show=’show’>

<div class=’dialog’>

<buton @click=」closed」>關閉</button>

</div>

</div>

</template>

Let modal={

Props:[‘show’],

Methods:{

Closed(){

    This.$emit(「close」);

}

}

Template:」#mydialog」

}

五

Npm install vue vue-router axios bootstrap

Slot 插槽 能夠定製模板

<modal><h1>肯定刪除麼</h1></modal>

<slot></slot>

<slot>默認標題</slot>  默認值 若是傳值則會被替換掉

<slot name=」default」>默認標題</slot>   有名字 默認爲default

爲保證內容順序 用名字區分位置

<slot name=’title’>默認標題</slot>

<slot name=’content’>默認內容</slot>

<slot name=’default’>默認值</slot>

<modal>

<p slot=」content」>內容</p>

<h1 slot=」title」>標題</h1>
</modal>

父調用子組件的方法 經過ref

<loading ref=」load」><loading>

Mouted(){   //頁面掛載好後獲取組件實例

this.$refs.load.hide();

This.$refs.load.$el.style.background=’red’;

}

Keep-alive 爲了提升性能 緩存組件 爲路由緩存內容

<keep-alive>

<component is=」」></component>

<keep-alive>

$nextTick()

子組件和父組件同時擁有mounted方法，先走子組件

須要等待子組件掛載完成後再觸發父組件的掛載

Mounted是異步渲染dom,須要耗費時間渲染

this.nextTick(()=>{    //在mounted想操做dom就加一個nextTick

this.$refs.child.$el.innerHTML

})

 

 

 

 

 

 

 

Flex 佈局

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

display: flex;

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

 

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）

容器的屬性

flex-direction    決定主軸的方向 row | row-reverse | column | column-reverse;

flex-wrap       決定如何換行  nowrap | wrap | wrap-reverse

flex-flow        前兩個簡寫模式<flex-direction> || <flex-wrap> 默認值 row nowrap

justify-content    主軸上的對齊方式

flex-start | flex-end | center | space-between(兩端對齊) | space-around(兩側間隔相等)

align-items       交叉軸上對齊    

flex-start | flex-end | center | baseline (第一行文字基線)| stretch(無高度、auto佔滿項目)

align-content     多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用

flex-start | flex-end | center | space-between | space-around | stretch(佔滿整個交叉軸)

項目的屬性

Order     項目的排列順序。數值越小，排列越靠前，默認爲0

flex-grow  項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍

flex-shrink  項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小

flex-basis 在分配多餘空間以前，項目佔據的主軸空間（main size）。

瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小

它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間

Flex   是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

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