Flexbox 產生器
設定屬性，並以白話文閱讀它們實際的作用。
- 在您的瀏覽器中執行 — 您的文字絕不會傳送到任何地方
- 免註冊、無額度限制，可隨您高興使用多少次
運作方式
Flexbox 並不複雜，但有一件事幾乎讓每個人中招：justify-content 與 align-items 並不代表水平與垂直。它們代表沿著方向與橫跨方向，而方向是由您設定的。
陷阱，直接說明
在 flex-direction: row 時，justify-content 作用於水平方向，align-items 作用於垂直方向。切換為 column 後，兩者完全對調。花在 flexbox 上的每一個小時，基本上都耗在這件事。下方的說明會隨著您更改方向而更新，讓這種關係看得見，而不是靠死記。
主軸與交叉軸
主軸是項目沿著排列的軸，由 flex-direction 設定。交叉軸與它垂直。justify-content 沿主軸分配空間；align-items 在交叉軸上安置項目。一旦記住這兩個名稱，其餘就迎刃而解。
gap，以及它為何取代了 margin
gap 會在項目之間留出空間，而不會在第一個與最後一個的外側增加，這正是 margin 做不好的地方，人們過去得用 :last-child 的小技巧來修正。目前每個瀏覽器都支援它，已經沒有理由避開它。
nowrap 代表縮小，而不是溢出
預設是 nowrap，項目會縮到小於其自然大小以便容納，而不是移到新的一行。這就是文字有時會在 flex 列中意外被擠壓的原因。設定 wrap 可讓項目改為往下移；在子元素上設定 min-width: 0，則能阻止它縮到小於其內容。
兩個方向都置中
justify-content: center 搭配 align-items: center，不論 flex-direction 為何，都能讓項目在兩個方向置中，這是唯一值得直接背起來的組合。
Flexbox 產生器：常見問題
為什麼 align-items 會讓東西水平移動？
因為 flex-direction 是 column。這兩個屬性遵循的是方向，而不是螢幕。
主軸與交叉軸有什麼差別？
主軸是項目排列的方向，由 flex-direction 設定。交叉軸則與它垂直。
如何讓東西在兩個方向都置中？
同時使用 justify-content: center 與 align-items: center。
為什麼我的文字被擠壓？
預設的 nowrap 會縮小項目以符合空間。請設定 flex-wrap: wrap，或在子元素上設定 min-width: 0。
可以在 flexbox 中使用 gap 嗎？
可以，目前每個瀏覽器都支援。它比 margin 更好，因為不會在兩端多出空間。