前言

今天可以切回正題了，回來繼續討論justify-content。

Flex Container 主要屬性:

justify-content屬性值

justify-content 屬性會沿著彈性容器目前彈性行的主軸對齊彈性項目 ，用屬性值來調整彈性項目在彈性容器上如何分佈。
justify-content 屬性是在彈性容器上設定而不是個別地在彈性項目上設定。

以下是justify-content屬性值：

圖片取自8.2. Axis Alignment: the justify-content property

justify-content: flex-start

為預設值，會讓彈性項目全部往main-start方向集中，每行彈性行的第一個彈性項目緊靠著main-start端，接下來其他彈性項目依序緊靠前一個項目。若有設定換行，會持續依序排列到彈性行的尾端。
main-start位置是由fiex-direction與書寫模式決定。
若是彈性容器沒有足夠空間容納所有項目，又設定了nowrap或維持預設值，彈性項目會從main-end端溢出。

justify-content: flex-end

flex-end則是會讓彈性項目往main-end方向集中，把每行彈性行最後一個項目緊靠main-end，再依序排列先前的彈性項目。（a-b-c排列也還會是a-b-c，只是c靠在尾端）
這個情況下，要是不允許換行加上沒有足夠空間排列，就會從main-start溢出。

justify-content: center

center會讓彈性項目離開兩端，集中在==主維度==中點的主軸上，也就是説所有項目會緊靠彈性行的中心；
若沒有設定允許換行加上沒有足夠空間，彈性項目就會從main-start及main-end兩端均勻溢出。

justify-content: space-between

將每行彈性行第一個彈性項目放在主軸上緊靠main-start的位置，最後一個彈性項目則緊靠在main-end的位置，接著在每個相鄰的彈性項目間都放入相同的空間（同彈性行任兩個彈性項目間距離都會相等），直到填滿整個彈性行。
每個換行也是一樣重複此排列邏輯，也就是說，即使當只有一個彈性項目時，首先會緊靠main-start的位置，這其實有點反直覺。

另外要注意是，為何強調「每行彈性行」，因為不同行中若各個彈性項目尺寸不同會造成每行彼此項目間距離不同，所以「任兩個彈性項目間距離都會相等」會強調是在同彈性行狀態下。

justify-content: space-around

一樣將第一個及最後彈性項目擺在彈性容器兩端，space-around將彈性行剩下的空間平均，平均後的空間均分在每個彈性項目的兩側。
由於此排列邏輯會出現第一跟第二個（也不一定是第一跟第二個，項目兩側其中一端不為main-start或main-end）彈性項目間的距離是，main-start與第一個項目（或main-end與最後一個項目）間距離的兩倍。

若是允許換行，兩個彈性項目間距離是取決每行彈性行的可用空間，所以可能不同行時，項目間距離不同。

同center，設定了nowrap但彈性容器空間不夠，彈性項目會均勻從首尾兩端溢出。

justify-content: space-evenly

space-evenly表示使用者代理會計算彈性項目的(個數＋1)，接著將剩餘空間除以(項目個數＋1)，得到數字即為項目間距，然後固定塞入每個項目的前面，只有最後的空間放在最後一個項目後面。
變成不管有沒有接main-start或main-end，任間距都會是相等的。

一樣將第一個及最後彈性項目擺在彈性容器兩端，space-evenly會將平均剩下的空間，所有間隙都等長，這表示主軸上開始與結束邊之間的空間會等於各個彈性項目之間的空間。

資料參考

書籍<CSS大全第四版>

CSS Flexible Box Layout Module Level 1 -8.

Mdn : justify-content

W3school - CSS justify-content Property