11760
次閱讀

Flexbox 是一種強大的 CSS 佈局模型，透過設定 display: flex 來啟用。它專為一維佈局設計，能有效解決許多傳統佈局技術的困難。

要解決 display:flex 容器中的 inline 元素在寬度不足時不換行的問題，您可以使用以下幾種方法：

1. 在 flex 容器上添加 flex-wrap: wrap; 屬性：

css
.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允許項目換行 */
}

2. 如果您希望保持單行但內容能夠自動調整大小，可以設置 inline 元素的 min-width 或使用 flex-shrink：

css
.flex-item {
  min-width: 0; /* 允許元素收縮到比內容更小 */
  flex-shrink: 1; /* 允許元素收縮 */
}

3. 針對特定的 inline 元素，可能需要設置 overflow 屬性：

css
.flex-item {
  overflow: hidden;
  text-overflow: ellipsis; /* 文本溢出時顯示省略號 */
  white-space: nowrap; /* 防止文本自動換行 */
}

4. 如果您處理的是文本內容，還可以考慮使用 word-break 或 overflow-wrap：

css
.flex-item {
  word-break: break-word; /* 允許在單詞內換行 */
  overflow-wrap: break-word; /* 允許長單詞換行 */
}

Flexbox (display) 在網頁設計中的特性

基本概念

Flexbox 由兩個主要部分組成：

• Flex 容器（Flex Container）：設置 display: flex 的父元素
• Flex 項目（Flex Items）：容器內的子元素

主要特性

1. 靈活的方向性

css
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

可以輕鬆切換水平或垂直佈局，並且可以反轉順序。

2. 內容對齊與分布

主軸對齊（justify-content）：

css
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

交叉軸對齊（align-items）：

css
.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

3. 換行控制

css
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

控制項目在容器空間不足時是否換行。

4. 項目大小調整

css
.item {
  flex-grow: 0;   /* 擴張比例，默認為 0 */
  flex-shrink: 1; /* 收縮比例，默認為 1 */
  flex-basis: auto; /* 初始大小 */
  
  /* 簡寫 */
  flex: 0 1 auto; /* grow shrink basis */
}

5. 項目順序調整

css
.item {
  order: 0; /* 默認為 0，可以是負數 */
}

可以不修改 HTML 結構而改變顯示順序。

Flexbox 的優勢

1. 響應式設計：項目可以自動調整大小以適應不同螢幕尺寸
2. 垂直置中：輕鬆實現垂直居中，這在以前是很困難的
3. 空間分配：靈活控制空間分配，實現均勻分布或特定比例分配
4. 順序控制：可以改變視覺順序而不影響 HTML 結構或無障礙性
5. 對齊簡化：簡化了複雜的對齊操作

常見應用場景

1. 導航欄佈局
2. 卡片式設計
3. 表單佈局
4. 內容置中
5. 均勻分布的網格系統
6. 響應式設計中的自適應元素

瀏覽器支持

現代瀏覽器都很好地支持 Flexbox，包括 Chrome、Firefox、Safari、Edge 等。

與 Grid 的比較

• Flexbox 適合一維佈局（行或列）
• Grid 適合二維佈局（行和列）

在許多現代網頁設計中，Flexbox 和 Grid 常常搭配使用，各司其職。

Flexbox 是網頁設計中不可或缺的工具，掌握它可以大大提高佈局效率和靈活性。