flex布局篩子案例
首先在vscode中建立乙個篩子模型
篩子的頁內樣式 .container .item
使用flex布局首先清楚在盒子中加上display:flex，盒子就是容器，引用flex後，須清楚四個概念，容器，專案，主軸，交叉抽概念。
flex布局主要有倆個屬性，容器的屬性和專案的屬性。
容器屬性：(1)flex-direction:改變主軸方向屬性
flex-direction:row;預設主軸從左向右；
flex-direction:row-reverse;主軸方向從右向左；
flex-direction:column;主軸方向從上到下;
flex-direction:column-reverse;主軸方向從下到上；
（2）flex-direction-wrap:當一行**裝不下時，是否換行；
flex-wrap:nowrap;不換行；
flex-wrap:wrap;換行；
flex-wrap:wrap-reverse;從下到上反方向換行；
（3）flex-flow：（1）（2）的簡寫模式
（4)justify-content:專案在主軸排列的方式；
justify-content:flex-start;表示專案從主軸的左邊開始排列，
justify-content:flex-end;表示專案從主軸的右邊開始排列，
justify-content:center;表示專案從中間開始排列，
justify-content:space-between;表示富餘空間在專案和專案之間排序；
justify-content:space-around;表示富餘空間環繞在專案之間；
（5）align-items:表示專案在交叉軸上如何排列；
align-items:flex-start;預設值；
align-items:flex-end;專案在交叉軸的終點位置開始排列；
align-items:center;專案在交叉軸的中間位置開始排列；
align-baseline;第一行文字的基線對齊；
(6)align-content:用來設定多跟主軸的關係；
align-content:flex-start;預設值多根主軸從上到下開始排列；
align-content:flex-end;多根主軸從下到上開始排列；
align-content:center;多根主軸從中間開始排列；
align-content:space-between;富餘空間在多根主軸之間開始排列；
align-content:space-around;富餘空間環繞在多根主軸之間；
專案屬性（1）order定義專案的排列順序，值越小越先排列；
（2）flex-grow;表示如果有多餘的空間專案按照設定的比列生長；
（3）flex-shrink:在不換行的情況下，一行裝不下是進行壓縮；
（4）flex-basis：設定專案在主軸上佔多少的比列；
（5）flex (2) (3) (4) 簡寫模式；
（6）align-self:處理單個專案在交叉軸的富餘空間；
以上就是有關容器和專案的屬性，屬性有很多種，但常用的熟練掌握住這幾種就ok了。
github
隨後我把專案整理一下傳送到github上
flex布局（主要分清楚容器和條目）
設定在容器上面的屬性 flex direction flex wrap flex flow justify content align items align content 1 flex direction row row reverse column column reverse row 預設值...
Flex4基礎 元件定位和容器布局
demo 以下資料部分來自adobe中文網，但資料年代已久，根據我自己的實驗對部分內容進行了更新。首先了解乙個基礎定義 容器和元件，元件是button textinput等用於顯示的基礎控制項，容器是用來存放元件的，多個元件可以放在同一容器中。flex的依靠容器來執行布局，大多數 flex 容器使用...
Flex4基礎 元件定位和容器布局
以下資料部分來自adobe中文網，但資料年代已久，根據我自己的實驗對部分內容進行了更新。首先了解乙個基礎定義 容器和元件，元件是button textinput等用於顯示的基礎控制項，容器是用來存放元件的，多個元件可以放在同一容器中。flex的依靠容器來執行布局，大多數 flex 容器使用預定義的規...