CSS Flexbox產生器
以視覺化方式建立CSS flexbox版面配置。在調整方向、對齊、換行和間距時即時查看效果。
1
2
3
4
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
什麼是CSS Flexbox產生器？
Flexbox是CSS中配置元素的現代方式，比浮動（float）或絕對定位簡單得多。相關屬性包括：flex-direction（行或列）、justify-content（主軸對齊）、align-items（交叉軸對齊）、flex-wrap和gap。本工具將它們全部呈現出來，並提供即時預覽。
常見問題
該用Flexbox還是Grid？▼
對於一維版面配置（一排按鈕、一個導覽列）使用flexbox。對於二維版面配置（響應式網格中的卡片）使用CSS Grid。
相關工具
顏色轉換工具（HEX/RGB/HSL）
在HEX、RGB和HSL格式之間轉換顏色。可視化選取顏色，或手動輸入數值。
CSS Box Shadow 產生器
以視覺化方式建立 CSS box-shadow 值。即時預覽並複製產生的 CSS。
CSS漸層產生器
建立線性和放射狀CSS漸層。以視覺化方式選擇顏色，並複製產生的CSS。
Cubic Bezier緩動曲線產生器
為CSS建立cubic-bezier緩動曲線。內建標準預設。
配色方案產生器
從任意基準色產生和諧的配色方案。支援互補色、鄰近色、三角色和單色方案。
CSS Border Radius 產生器
以視覺化方式建立複雜的 CSS border-radius 值。可獨立控制每個圓角。