.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}什麼是 Flexbox 產生器?
Flexbox 產生器是 CSS 靈活盒佈局的視覺遊樂場。您可以使用按鈕和滑桿設定容器屬性,觀看即時預覽,即時重新排列項目,並複製預覽所使用的確切 CSS。它消除了記住哪個屬性做什麼的猜測,因此您可以在瀏覽器開發工具中建立一行、一列、居中佈局或卡片包裝網格,而無需反覆試驗。
Flexbox 是一種一維佈局模型:物品沿著主軸佈局並在橫軸上對齊。容器透過六個屬性驅動幾乎所有內容。彎曲方向選擇主軸以及它是向前還是向後運行。 justify-content 沿著主軸分配可用空間。對齊項目將項目定位在橫軸上。 Flex-wrap 決定項目是否溢出到新行上,並在包裝完成後將這些行分開對齊內容空間。間隙增加了無邊距的項目之間的一致間距。
該工具將所有這些屬性暴露在一個地方並立即顯示結果。因為預覽是使用輸出框中出現的相同聲明呈現的,所以您看到的正是將 CSS 貼上到樣式表中時得到的結果。產生的規則預設針對 。container 類別,並且僅列出重要的屬性,包括僅在啟用包裝時對齊內容,因為它對單行沒有影響。
一切都完全在您的瀏覽器中運行。沒有註冊,沒有上傳任何內容,一旦頁面加載,該工具就會保持離線工作。它同樣有用,可以作為了解 Flex 屬性如何互動的學習輔助工具,也可以作為產生可生產 CSS 的快速方法。更改預覽項目的數量,調整頭部容器的大小,然後讀出產生您想要的對齊方式的聲明,無論是間隔的導航列還是完全以兩個軸為中心的英雄部分。
如何使用 Flexbox 產生器?
選擇方向並包裹
選擇彎曲方向以及項目是否應纏繞在多條線上。
設定對齊
調整主軸上的「證明內容」並對齊橫軸上的項目,直到預覽與您的佈局相符。
調音間距
設定項目之間的間隙,並在包裝時設定將線條間隔開的對齊內容。
複製 CSS
產生的規則即時更新。一鍵複製並將其貼到樣式表中。
主要特點
現場預覽
當您變更屬性時,範例項目的容器會立即重新下載,因此您可以在複製任何程式碼之前看到佈局
每個容器屬性
控制顯示、彎曲方向、彎曲換行、證明內容、對齊項目、對齊內容和來自一個面板的間隙
你所看到的就是你所得到的
預覽使用與輸出相同的聲明,因此複製的 CSS 會在螢幕上產生精確的佈局
清潔、最小輸出
產生的規則僅列出有意義的屬性並省略對齊內容,直到打開包裝
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!