• 定義伸縮方向

flex-direction:row;             /*預設值；從左到右排列。*/
flex-direction:column;          /*從上到下排列*/

• 定義行數

flex-wrap:nowrap;               /*預設值；單行顯示*/
flex-wrap:wrap;                 /*伸縮容器多行顯示*/

• 主軸對齊

justify-content:flex-start;     /*預設值；伸縮專案向一行的起始位置靠齊。*/
justify-content:flex-end;       /*伸縮專案向一行的結束位置靠齊。*/
 

justify-content:center;         /*伸縮專案向一行的中間位置靠齊。*/
justify-content:space-between;  /*伸縮專案會平均的分佈在行裡。*/
justify-content:space-around;   /*伸縮專案會平均的分佈在行裡，兩端保留一半的空間。*/

• 側軸對齊

align-item:flex-start;          /*伸縮專案在側軸起點邊的外邊距緊靠住該行在側軸起始的邊。*/
align-item:flex-end;            /*伸縮專案在側軸終點邊的外邊距緊靠住該行在側軸終點的邊。*/
align-item
 
:center;              /*伸縮專案的外邊距盒在該行的側軸上居中放置。*/
align-item:baseline;            /*預設值；伸縮專案拉伸填充滿整個伸縮容器。*/

• 伸縮行對齊
  

align-content主要用來調準伸縮行在伸縮容器裡的對齊方式，該屬性適用於伸縮容器。類似於伸縮專案在主軸上使用justify-content屬性一樣，但本屬性在只有一行的伸縮容器上沒有效果。

align-content:flex-start;       /*各行向伸縮容器的起點位置堆疊。*/
align-content:flex-end;         /*各行向伸縮容器的結束位置堆疊。*/
 

align-content:center;           /*各行向伸縮容器的中間位置堆疊。*/
align-content:space-between;    /*各行在伸縮容器中平均分佈。*/
align-content:space-around;     /*各行在伸縮容器中平均分佈，在兩邊各有一半的空間。*/
align-content:stretch;          /*預設值；各行將會伸展以佔用剩餘的空間。*/