前言

據說在好久以前(並沒有多久!)，在神器flex出現以前都要自己計算尺寸下去做排版

自從Flex出現之後，很多人都染上了毒癮，從此踏上不歸之路~

聽到就嚇到了!?這麼好用萬一忘記根本怎麼辦!?

所以我都故意不用flex下去練習、直到某天發現...

天啊我flex用的很不順手...囧

這樣怎麼行!馬上練起來

學習資源

1. 首先推薦Amos老師的玩轉 CSS FLEX，雖然是免費的，但是品質與內容堪稱精品，看完之後對flex會有7分的了解~當然要記得不能只看不做，可以跟著老師的範例自己寫一次，最後的3分熟練要靠自己呀

2. 看完影片之後，就可以開始玩青蛙囉~https://flexboxfroggy.com/
   
   免費的青蛙遊戲，裡面可以應用到flex的各種屬性，絕對是入門上手的好東西!

flex的U質學習資源與文章太多了~
基本屬性的部分我就不再多做說明
直接對我當時容易搞混、迷惑的地方做一點心得分享 :)

馬上進入今天的主題：

align-items vs. align-content 傻傻分不清楚

如果今天用的是flex-direction:row,讓物件橫排
那麼align-items/content 管的就是物件上下的位置
那...兩個管的都是上下，有什麼不同嗎?
先來看看兩個能用的屬性~

align-items

• flex-start
• flex-end
• center
• stretch

align-content

• flex-start: 多行都集中在頂部。
• flex-end: 多行都集中在底部。
• flex-end:: 多行居中。
• space-evenly: 行與行之間保持相等距離。
• space-between: 左右貼齊邊緣
• space-around: 每行的周圍保持相等距離。
• stretch: 每一行都被拉伸以填滿容器。(預設)

注意到了嗎?align-content跟 justify-content的文字中的 content 意思是"內容"，且都能使用 space 系列!(space-evenly、space-between、space-around)
喔!停下來想一想這其中的含意
那就代表...align-content是針對很多列的情況下使用

還是霧煞煞沒關係
我們來玩一下就知道了

/*父層設定*/
width: 600px;
height: 600px;
display:flex;
flex-wrap:wrap;

先來看看如果在很多列的情況下
1.先不設定align-items&align-content
2.每一個方塊不設定高
3.設定不同的 width 來看分配狀況

這個時候的高會根據列數平均分配到每一列

接下來方塊固定使用width:160px，並加入
1.方塊設定 height: 50px;
2.align-items:center;

看起來是這個樣子的

怎麼跟想像的不一樣!?不應該要全部集中在灰色父層的中央嗎??
怎麼會各自分散呢?
別急別急，flex其實還在幫每一列分配高度
手工劃分一下區域就很明顯了

每一個方塊上下的橘色區域都是相等的

把
align-items:flex-star;
align-items:center;
align-items:flex-end;
都設定一輪!
會發現方塊依舊維持在原本的位置上下移動

Q:如果要把這些方塊集中在一起移動要怎麼做呢?

方塊一樣固定使用width:160px，並加入
1.方塊height: 50px
2.✨align-content✨

如果要方塊全部都集中在一起進行上下移動，就必須要出動align-content
它可以讓多行進行整體的移動

簡單來說就是...要多行整體性移動比較適合使用align-content
如果是只操作一列的話用align-items (只有一列用align-content看不出效果)

這樣align-items 、align-content是不是就不再傻傻分不清楚了呢!
flex好好吸~明天繼續flex研修之路!