Flexbox 教學 | DailyTools

user@dailytools:/flexbox-guide█

Flexbox 教學

> 預覽

1

2

3

4

> 容器設定

$ display:

$ direction:

$ wrap:

$ justify:

$ align-items:

$ align-content:

$ gap:

px

> 項目設定

$ 選擇項目:

$ order:

$ flex-grow:

$ flex-shrink:

$ flex-basis:

$ align-self:

> 預設範例

> 產生的 CSS

.container {
  display: flex;
  gap: 8px;
}

使用說明

互動式 Flexbox 教學工具，即時調整屬性並預覽效果。

調整容器與項目的各種 Flexbox 屬性，觀察版面變化，並可複製產生的 CSS 程式碼。點擊預覽區域中的項目可選取並調整其個別屬性。

$ cat /etc/author.conf

喜歡這個專案嗎？

您的支持能幫助我持續開發更多實用工具！

[ Buy me a coffee ] [ Portaly ] [ Blog ]