# 【程式學習日記】六角學院：軟體工程師體驗營｜Week 2 - Flexbox 多欄式排版全攻略

# 我的個人背景:
目前我在職的職位是客服，這一年開始學程式語言想要轉職，對於HTML、CSS、JavaScript、php基礎概念還是有的，只是沒有那麼精通。

# 參加體驗營的原因:
想多做一些作品，讓自己今年可以轉職成功，在做專題作品時覺得自己切版能力不是很理想，剛好滑IG滑一滑就看到六角學院體驗營的廣告，看到頁面介紹
「五場直播教什麼?」
第一週:打造最強前端開發環境
第二週:Flexbox多欄式排版全攻略
第三週:RWD一點都不難，手把手打造手機版網頁
第四週:Hexo極速免費架站全攻略
第五週:Hexo樣板客製化、網站上架一條龍全攻略分享
看到這幾項教學就心想天啊~這是老天爺在暗示我嗎，時間這麼剛好又剛好教學內容是我想要更加深了解的，索性就來參加體驗營，希望自己更好
# 參加體驗營心得:
覺得洧杰校長、六角學院非常用心，想盡辦法的幫助學員們，提供每日任務、小組任務、重點任務讓學員們多做多練習，加深程式碼的能力。

校長也非常的熱情，至少我在直播間聽校長教學時我是這樣認為的。

學習的時候，真的真的很需要有熱情又熱忱的老師教學，這樣學習才不會覺得估躁乏味就會很認真的聽課

# Flexbox 多欄式排版重點整理:
1.display: flex;
當我們將父元素加入 display: flex; 屬性時，內容物會依照交錯軸線排列成一行；
簡單來說就是將子層左右並排。

2.flex-direction;
想將內容物呈現直向排列，可以透過 flex-direction 來設定。

(1)flex-direction: row;
這是預設值，將內容物按照主軸排列。
簡單說就是橫向排列。

(2)flex-direction: row-reverse;
一樣是將內容物按照主軸排列，不過主軸線的起點與終點相反。

(3)flex-direction: column;
把交錯軸位置和主軸線位置調換，所以內容物會變成直向排列。

(4)flex-direction: column-reverse;
一樣是直向排列，不過起點與終點相反。

3.justify-content;
主要以主軸線來對齊

（1）justify-content: flex-start
預設值，對齊主軸線最前端（可以理解成起點）

（2）justify-content: flex-end
對齊主軸線最終端

（3）justify-content: center
對齊主軸線中央

（4.）justify-content: space-around
內容物平均分配寬度和間距

（5）justify-content: space-between
平均分配寬度，第一項和最後一項貼齊邊緣
簡單來說就是左靠左，中靠中，右靠右。

4.flex-wrap
在使用 flexbox 效果時我們可以發現如果子元素數量較多時，內容常會被壓縮且擠在同一行，這時我們就可以透過 flex-wrap 來換行。

預設值為flex-wrap: nowrap 也就是上述，不會自動掉到下一行

flex-wrap: wrap;
當內容物超過父層寬度時，會掉到下一行

5.align-items
align-items 和 justify-content 相反，主要以交錯軸線來做排版。
簡單來說；
 justify-content 負責控制主軸線
align-items  負責控制交錯軸
兩個功能雷同，只是控制的軸線不一樣

（1）align-items: flex-start
對齊交錯軸線最前端。
下圖的內容物都靠上，也就是向交錯軸的起點對齊

（2）align-items: flex-end
對齊交錯軸線最末端。
下圖內容物靠下，也就是向交錯軸的終點對齊

（3）align-items: center
對齊交錯軸線中央。

6.align-content

（1）align-content: flex-start
每行貼齊交錯軸線最前端。

（2）align-content: flex-end
每行貼齊交錯軸線最末端

（3）align-content: center
每行對齊交錯軸線中間

（3）align-content: space-between
第一行與最後一行分別對齊交錯軸線最前端與最末端
簡單來說，假設今天有三行內容物，那就會呈現上靠上，中靠中，下靠下的排列方式。

7.Flex 裡還可以包 Flex
父層設定flex只會影響子層，子層的下一層（孫層）沒有辦法被影響。
所以如果孫層也需要flex的話，就需要在子層也下flex

# Flexbox測試工具分享:
1.https://codepen.io/peiqun/pen/WYzzYX
2.https://easonliu0913.github.io/flexdemo/