創建完美的 Flexbox 佈局
使用我們直觀的拖放介面可視化、自定義和生成 CSS flexbox 代碼。
容器屬性
項屬性
Preview
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; } .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
流行的 Flexbox 預設
水平和垂直居中
非常適合將徽標、按鈕或任何元素水準和垂直居中。
等間距
使用space-between或space-around在元素之間創建相等的間距。
垂直功能表
構建具有一致間距和對齊方式的垂直導航功能表。
回應式網格
創建回應式網格佈局，根據可用空間包裝專案。
英雄旗幟
主標題
帶有行動號召的 Hero 部分
設計一個帶有標題、副標題和行動號召按鈕的主橫幅。
頁腳佈局
Company
About Us
Careers
Support
説明中心
聯繫我們
© 2023 Flexbox 產生器
使用可在較小螢幕上堆疊的列構建響應式頁腳。
真實示例
導航欄
一種常見的導航欄佈局，左側是logo，中間是功能表項，右側是購物車圖示。
Card Grid
卡片標題
卡片描述文本在此處
卡片標題
卡片描述文本在此處
卡片標題
卡片描述文本在此處
一個回應式卡片網格，使用 flexbox 屬性適應不同的螢幕大小。
文章佈局
文章標題
發表於 January 1， 2023 ·5 分鐘閱讀
文章內容在這裡。這可以是簡短的摘要或完整的文章文本。Flexbox 有助於以視覺上吸引人的方式對齊圖像和文本。
一種常見的文章佈局，左側是圖像，右側是文本內容，在行動裝置上堆疊。
儀錶板佈局
帶有頁眉、側邊欄、主內容區域和頁腳的儀錶板佈局，使用 flexbox 進行水平和垂直對齊。
Flexbox 基礎知識
什麼是 Flexbox？
彈性框佈局，通常稱為彈性框，是一種 CSS3 佈局模型，它提供了一種有效的方法來在容器中的項目之間分配和對齊空間，即使它們的大小未知或動態也是如此。
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).
關鍵概念：Flexbox 引入了兩個主要概念：Flex 容器 and the Flex 項.容器是父元素，項是其直接子元素。
主軸與交叉軸
Flexbox 佈局基於兩個軸：main axis and the 交叉軸.
-
主軸：Flex 項佈局所依據的主軸。定義者
flex-direction. - 交叉軸：垂直於主軸的軸。它的方向取決於主軸方向。
容器屬性
| Property | Description |
|---|---|
display |
定義 Flex 容器;inline 或 block 取決於給定的值。 |
flex-direction |
建立主軸，從而定義 Flex 項在 Flex 容器中的放置方向。 |
flex-wrap |
默認情況下，flex 項將全部嘗試適應一行。您可以更改該屬性，並允許使用此屬性根據需要對項進行換行。 |
justify-content |
沿 Flex 容器當前行的主軸對齊 Flex 項。 |
align-items |
沿 Flex 容器當前行的交叉軸對齊 Flex 項。 |
align-content |
當交叉軸中有額外空間時，將 Flex 容器的線條對齊。 |
項屬性
| Property | Description |
|---|---|
order |
默認情況下，Flex 項按源順序排列。但是，order屬性控制它們在 Flex 容器中的顯示順序。 |
flex-grow |
定義 Flex 項在必要時增長的能力。它接受用作比例的無單位值。 |
flex-shrink |
定義 Flex 項在必要時收縮的能力。 |
flex-basis |
定義 Flex 項在根據 Flex 因數分配任何可用空間之前的初始大小。 |
align-self |
允許預設對齊方式（或align-items） 覆蓋。 |