https://benzhub.github.io/tags/flexbox/Recent content in Flexbox on BenzHubHugozh-TWSun, 09 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/009-flexbox/Sun, 09 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/009-flexbox/<blockquote> <p>在 <strong>TailwindCSS</strong> 裡，<strong>Flexbox</strong> 是最常用、也最值得先練熟的一維版面引擎——只要對容器寫上 <code>flex</code>，再搭配 <code>justify-*</code> 決定主軸怎麼分配、<code>items-*</code> 決定交軸怎麼對齊、<code>gap-*</code> 拉開間距、<code>flex-1</code> 讓子項等分空間，就能一組 utility 搞定置中、等分、換行這些每天都在寫的版面需求。這是 <strong>TailwindCSS 完整教學</strong> 系列的第九篇，我們會把整套 Flexbox 工具類從容器到子項一次講透，並以 v4 為預設、標註與 v3 的差異。</p> </blockquote>