# Web企業運算_Week4_許家維

## 本週練習清單
* 複習練習上課內容
* 學習基礎Python程式及如何安裝到VSCODE環境上
* 複習Keyframes動畫，應用於專案
* 切版練習
* 閱讀技術文章
* 本篇連結 : https://hackmd.io/h2uE7knaRDGUXdpxegUFAw?view

## 程式碼
Flex練習網站
六角學院 : https://hexschool.github.io/flexbox-pirate/index.html?fbclid=IwAR2N0fG2EjedEIvQ88_96p1V3y358I3lhc6RJflbupSvStFUsfeNlz_1z6c&fbclid=IwAR3GpZPMcyqg-YjntQTsIS4vp79Z8gIAmccqjEHYobeelB4OOsO4a-FUlI4&fbclid=IwAR1R9I1h8TzJ5VaH8icbw8aLylIJfciBCnuryomtDUb6Uy66Glx03PKPj3E#/simple
flexboxFroggy : https://flexboxfroggy.com/

Python程式碼

<!--第一段 -->
def hello(input):
    output = "hello" + input + "!"
    print(output)

hello("World")

<!--第二段 -->
<!-- 匯入套件並指定一名稱供後續使用 -->
<!-- Pandas：有了Pandas可以讓Python很容易做到幾乎所有Excel的功能了，像是樞紐分析表、小記、欄位加總、篩選 -->
import panda as pd

<!-- Numpy: Python做多維陣列（矩陣）運算時的必備套件，比起Python內建的list，Numpy的array有極快的運算速度優勢 -->
import numpy as np

<!-- Matplotlib：基本的視覺化工具，可以畫長條圖、折線圖等等 -->
import matplotlib.pyplot as plt

<!-- figure(num=編號, figsize=寬高, dpi=None, facecolor=背景顏色, edgecolor=邊框顏色, frameon=是否顯示邊框) -->
plt.figure()

<!-- 讀取full_data 內容 -->
df = pd.read_csv("full_data.csv")

<!-- 抓出檔案內location=Taiwan的資料 -->
taiwan = df[df['location']=='Taiwan']

<!-- 透過plot函數繪出想要的圖形 -->
taiwan.plot()

## 成果
* Flex Layout
* 將母元素設定display : flex，則該元素底下元素變成flex items
* **注意 ! 此時 Float、Clear、Vertical-align等方式失效**
* 我們可以如下圖，簡單分為外容器與內容器屬性
* **Flex 外容器屬性**
* **display** : 一開始必須宣告為flex或inline-flex方可使用。
* **flex-direction** : 決定內元素的排序方向
flex-direction: row | row-reverse | column | column-reverse
* **flex-wrap** : 是否換行的屬性
flex-wrap: nowrap | wrap | **wrap-reverse**
* **flex-flow** : 是 flex-direction 與 flex-wrap 的縮寫
* **justify-content** : 主軸(main)對齊(**依主軸的方向而定!!!**)
justify-content: flex-start | flex-end | center | space-between | space-around
**space-around：每個小方塊之間與父容器有間隔，但小方塊與父容器之間的間隔是小方塊彼此間隔的一半**
* **align-items** : 交錯軸(cross)的對齊設定
align-items: flex-start | flex-end | center | baseline | stretch
* **align-content** : 上一個屬性的**多行版本**
* 注意 stretch 在高度被限制的情況下不會正常伸展
align-content: flex-start | flex-end | center | space-between | space-around | stretch
* **Flex 內容器屬性**
* **flex-grow**: 元件的伸展性，是一個數值，當空間分配還有剩餘時的當前元件的伸展性，預設值為 0，如果設置為 0 則不會縮放
* **flex-shrink**: 元件的收縮性: 元件的伸展性，是一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 0，如果設置為 0 則不會縮放
* **flex-basis**: 元件的基準值，可使用不同的單位值
* **align-self** : **個別設定單一元件cross軸的對齊設定**
* **Order** : 可以重新定義元件的排列順序，**順序會依據數值的大小排列**

* **Python**
* python安裝
1. 官網下載3.8.2 64bit版本
2. customize installation
3. 資料夾位置 D:\python38
4. 設定環境變數 PATH D:\python38
5. 去cmd輸入python 確認已安裝成功

## 心得

這週學習了對於前端很重要的flex切版，比起一般的postion及display，flex顯得要容易學習了許多。經過這次課堂，對於flex的掌握度也有所提升，接下來就是要試著在專案或是Side Project中多多使用flex，以實戰代替練習。另外，本周老師也提到了一些Python爬蟲的基礎，本身沒有使用過Python，爬蟲也僅僅使用過R語言，目前從Python教學文章開始閱讀，逐步建立起對於Python的認識，希望過幾週後能夠提升掌握度