flex的一些方法註釋或者叫flex筆記

 1 // 水平居中
 2 display:flex；
 3 justify-content: space-around;
 4 
 5 // 垂直居中
 6 display:flex;
 7 align-items:content;
 8 
 9 // 水平垂直居中
10 display:flex;
11 justify-content:space-around;
12 align-items:center;
13 
14 //父級
15 display:flex;
16 //子級
17 align-self:flex-start;  // 居上對齊
18 align-self:flex-end;    // 居下對齊
19 align-self:center;      // 居中對齊
20 margin:auto;            // 水平垂直居中
21 flex:1; //(這裏數字能夠隨便填) //佔整塊的多少個
22 
23 
24 // align-items //註解 子元素側軸對齊
25 align-items:flex-start; // (默認) 元素在開始位置 富裕空間佔據另外一側
26 align-items:flex-end; // 富裕空間在開始位置 元素佔據另外一側
27 align-items:center; // 元素居中 富裕空間 平分左右兩側
28 
29 
30 
31 // flex-direction 自動填補空白
32 // 父級
33 display:flex;
34 flex-direction: row;    // 橫向自動填補空白（二選一）
35 flex-direction: column; // 縱向自動填補空白（二選一）
36 //子級
37 flex:1;
38 
39 
40 flex-direction  // 註解
41 flex-direction:row; // 主軸與行內軸方向做爲默認的書寫模式。即橫向從左到右排列（左對齊）。
42 flex-direction:row-reverse;// 對齊方式與row相反。
43 flex-direction:column; // 主軸與塊軸方向做爲默認的書寫模式。即縱向從上往下排列（頂對齊）。
44 flex-direction:column-reverse; // 對齊方式與column相反。