LocalTools離線瀏覽器工具合集

分類: 開發工具

CSS Flexbox 產生器

站方自行規劃沒找到想要的工具？

以視覺化方式建立 flex 容器並複製 CSS

在由真實 flex 項目組成的即時預覽上設定 flex-direction、flex-wrap、justify-content、align-items 與間距，再複製完成的容器宣告。這裡的一切都不會離開你的瀏覽器。

輸出
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。

這個工具能做什麼

Flexbox 有五個會互相牽動的屬性——方向一變，連換行與 justify-content 所謂的「主軸」都會跟著改變——這正是為什麼直接看結果會比在腦中推演來得快。這個工具會在畫面上保留一個真正的 flex 容器，裡面放著編了號的項目，讓你根據方塊實際的移動方式來判斷每個選項，而不是靠對規格的想像。

使用方式

  1. 設定 flex-direction 與 flex-wrap。
  2. 選擇 justify-content 與 align-items，並調整間距與項目數量。
  3. 把完成的 .container 規則複製進你的樣式表。

隱私說明

本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。

常見問題

預覽是真正的 flex 版面嗎？
是的。編了號的方塊是用你正在設定的那組 CSS 排出來的，而不是一張示意圖，所以你看到的就是複製後的規則會產生的結果。
為什麼改變 flex-direction 會讓 justify-content 的效果跟著變？
justify-content 一律沿著主軸作用，而主軸是水平還是垂直，正是由 flex-direction 決定的。切換成 column 後，「justify」的效果就會從左右變成上下。
我的版面內容會被上傳嗎？
不會。CSS 是依你設定的選項在頁面內組出的文字，預覽也是在本機算繪的。

回到全部工具