視覺化設計 CSS Flexbox 版面
「Flexbox 版面產生器」是一個實用的視覺化工具，協助使用者設定 flex 容器與其子項目。使用者可以透過控制面板調整各項版面屬性，在即時預覽區域即時觀察版面變化，並複製產生的 CSS 程式碼，直接應用於網頁設計中。
本工具適合以下使用者與應用場景：
- 想要以視覺化方式設計 CSS flexbox 版面。
- 需要快速為 flex 容器及其項目產生 CSS 程式碼。
- 希望深入理解不同 flexbox 屬性對版面所產生的實際效果。
- 正在建立常見的網頁版面，例如置中元素、導覽列、縱向堆疊、卡片網格或側邊欄。
調整容器屬性
在「容器」設定面板中，使用者可以調整影響整個 flex 容器的屬性，這些屬性決定了子項目的整體排列與對齊方式：
- 排列方向：可選擇「橫向」（Row）、「橫向反轉」、「縱向」或「縱向反轉」。當排列方向從橫向切換為縱向時，主軸與交叉軸會互相對調，這會直接影響「主軸對齊」與「交叉軸對齊」的運作方式。
- 換行：可選擇「不換行」（No wrap）、「換行」（Wrap）或「反向換行」。在「不換行」的設定下，所有項目都會被強制擠在同一行；當開啟「換行」後，無法容納的項目會自動掉到下一行。
- 主軸對齊：控制項目在主軸上的分佈，選項包括「起始」、「結尾」（End）、「置中」、「兩端對齊」、「環繞分佈」及「平均分佈」。
- 交叉軸對齊：控制項目在交叉軸上的對齊，選項包括「起始」、「結尾」（End）、「置中」、「拉伸」及「基線」。
- 多行對齊：當開啟換行並產生多行項目時，此屬性用於控制多行之間的間距分佈，選項包括「起始」、「結尾」（End）、「置中」、「拉伸」、「兩端對齊」、「環繞分佈」及「平均分佈」。
- 間距：輸入數值來設定項目之間以及行與行之間的空隙。
調整項目屬性
除了容器設定，使用者也可以針對個別「項目」進行微調。當點擊「新增項目」時，預覽區域會出現新的項目（例如「項目 5」）。
選取特定項目後，可以設定以下屬性：
- 順序：輸入數值以改變項目在排版中的先後順序。
- 放大：輸入數值，設定項目在容器有剩餘空間時的放大比例。
- 縮小：輸入數值，設定項目在空間不足時的縮小比例。
- 基準尺寸：可輸入數值或設定為「自動基準」（Auto）。
- 單獨對齊：覆蓋容器的交叉軸對齊設定，單獨控制該項目的對齊方式，選項包括「自動」（Auto）、「起始」、「結尾」（End）、「置中」、「拉伸」及「基線」。
在產生 CSS 程式碼時，系統採用了優化機制：只有屬性被修改過的項目，才會單獨產生專屬的 CSS 規則。
複製 CSS 程式碼
當調整出理想的版面後，使用者可以點擊「複製 CSS」按鈕。點擊後，按鈕狀態會切換為「已複製」，代表產生的 CSS 程式碼已成功複製到剪貼簿中，方便隨時貼上到專案的樣式表內。
瀏覽器內安全處理
本工具非常注重用戶隱私。所有的版面設定與程式碼產生過程，均直接在用戶的瀏覽器內完成。使用者在工具中進行的任何設定與輸入內容，均不會上傳到伺服器。
常見問題
主軸對齊（justify-content）與交叉軸對齊（align-items）有甚麼差別？
「主軸對齊」是沿著主軸（即項目排列的方向）來分配項目與剩餘空間，而「交叉軸對齊」則是控制項目在與主軸垂直的另一條軸線上的對齊位置。當您將「排列方向」從橫向改為縱向時，主軸與交叉軸會互相對調，這會使「主軸對齊」轉為控制上下排列，而「交叉軸對齊」轉為控制左右對齊。
單一項目的控制項如何使用？
您可以先選取特定的項目，然後針對該項目設定「放大」比例、「縮小」比例、初始的「基準尺寸」，以及該項目專屬的「單獨對齊」方式。「順序」屬性則允許您在不更動 HTML 結構的前提下，改變項目在畫面上的排列順序。為了保持程式碼簡潔，只有您實際修改過屬性的項目，才會在輸出的 CSS 中產生對應的樣式規則。
換行與多行對齊（align-content）甚麼時候會起作用？
當「換行」設定為「不換行」時，所有項目都會被強行擠在單一行內。一旦開啟「換行」，當容器寬度不足以容納所有項目時，放不下的項目就會掉到下一行。此時，「多行對齊」屬性才會生效，用以控制這些多行項目作為一個整體時的行間距分佈。此外，您可以使用「間距」屬性來直接設定項目之間與行與行之間的距離。