Flexbox 立即上手：flex-direction, justify-content, align-items 及 align-content 說明

基礎

了解 flex-direction 以及 justify-content

flex-direction

可以先了解 row 及 column。選 row 的話排起來是橫的，從左到右排列；選 

column 的話是行（英文的話比較好記憶因為 column 是柱子），從上到下排列。

justify-content

設定好 flex-direction 後，就可以來了解 justify-content

如果是 flex-direction 是

• Row 的話
• 從右開始排是 flex-start
• 從左是 flex-end
• Column 的話
• 從上是 flex-start
• 從下是 flex-end

以上都很直覺，

使用 https://the-echoplex.net/flexyboxes/ 玩一下即可上手！

中階

介紹 align-items

align-items

align-items 是用了調整在每個 items 排排站好之後，該 item 會在他的位置上會靠前、靠後、還是置中。

例如使用 flex-direction: column，來讓 items 從上到下排列；使用 justify-content: flex-end 來讓全部 items 至底之後，可以使用 align-items 來將 items 左右至中，可以想像成一般 Words 或其他文字編輯起中的放置。

進階

介紹 align-content

align-content

align-content 用來定義多行的時候怎麼分配工具。如果這個 flex-container 只有一行，沒有 wrap 的話就無效。

了解這些之後就可以看懂官方使用主軸線的說明：

• Row 的話，主軸線是水平線
• Column，主軸線是垂直線

justify-content 是排列 item 在主軸線上的位置

align-items 是排列 item 在主軸線的垂直線上的位置

align-content 是在有多個主軸線的時候，主軸線彼此之間的排列