flex-flow是direction和wrap的簡寫。
一般預設關注direction，不關注wrap，wrap一般都是換行的。
而direction就是確定主軸，有row,column還有他們的reverse。也就是橫著豎著還有他們的倒著。
主軸確定了下一步可以確定他們的專案在主軸用什麼樣的格式排列在主軸上（左右向）前提主軸是row，如果主軸是column，則相反
所以就有justify-content這個屬性，不展開了，五個屬性可以看阮老師的文章。
用align-content這個屬性，同樣有五個，他們可以在主軸不唯一的時候讓主軸們看起來不一樣，讓他們大塊的動。
align-items這個屬性，讓專案在上下方向的進行格式的操作。（預設主軸是row，也就是主軸是橫向的，如果是column則相反）不展開說了。
order這個屬性不是很重要，因為一般排序的話在html直接做出來了，不必要拿到css排序。
專案變大縮小還有基礎大小(暫時叫基礎大小)的三個屬性flex-grow,flex-shrink,flex-basis
預設值是0，1，auto
關於grow和shrink來說，只需要關注他們在父元件大小中是否有餘地或者沒有餘地時會不會變換寬度即可，變換的話就是1，不變的話就是0。
對於basis這個屬性，預設是auto。阮老師給出的結論是在分配多餘空間之前，專案佔據的主軸空間，所以也就是說basis是在父元件有多餘的地方的時候配合grow才會顯出作用的。
現在進行三個步驟來計算他們最終要佔多大地方
計算剩餘的分配空間
分配剩餘空間
他們基礎都為0，所以他們最後的寬度為240，240，120
那麼其他配置不變，item-1 width=140px，item-2的basis變成auto，width=100px。item-3的basis變成200px；
計算剩餘的分配空間
分配剩餘空間
他們基礎分別為0，100，200。加上他們分配到剩餘的就為120，220，260
//不寫flex
flex: 0 1 auto;
//flex:none;
flex: 0 0 auto;
//flex:auto;
flex: 1 1 auto;
//flex:1;
flex:1 1 0%;
//flex: 0%;
flex:1 1 0%;
//flex:24px;
flex:1 1 24px;
//flex: 2 3;
flex: 2 3 0%;
flex布局筆記
flex基本術語 display 定義乙個父容器，設定 display flex inline flex flex direction 設定主軸方向 預設橫軸 設定 row row reverse column column reverse flex wrap 設定容器子元素是否換行 預設不換行 設...
flex布局筆記
父容器配置display flex以後,就有一些flex布局專用的屬性可以設定了主要是以下幾個 1 flex direction 這個屬性決定了父容器中的子元素的排列方向,一共有四個屬性 column 從上到下 row 從左到右 column reverse 從下到上 row reverse 從右到...
Flex布局筆記
採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex 專案 flex item 簡稱 專案 總結flex布局原理 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex direction屬性值 屬...