CSS 彈性盒子布局(CSS Flexible Box Layout)是 CSS 的模塊。它為了最佳化 CSS 盒子模型的用戶介面設計而來、並把項目都配置在一個維度之內。在彈性盒子布局中,彈性容器的子項目們可以伸展到任何方向、並讓他們的尺寸更加「彈性」、或者持續增大,以填補未使用的空間,抑或縮小,以避免父元素溢出。子項目橫向或縱向對齊都很容易操作。

基本範例

下例的容器已經設為 display: flex、意味著三個子元素變成了彈性項目(flex item)。justify-content 值也設成了 space-between 以便將項目均勻地分佈在主軸上。每個物品之間放置相等數量的空間,左右項目與彈性容器(flex container)的邊緣齊平。你可能也發現到各項目在切軸(cross axis)上伸展。那是因為 align-items 的值是 stretch。項目伸展為彈性容器的高度、令它們看起来都如同最高的項目一般高。

參考

CSS 屬性

Glossary

教學

彈性盒子的基本概念
彈性盒子的概述
彈性盒子與其他布局的關係
彈性盒子如何與其他布局和 CSS 規範相關連
在彈性容器內對齊
彈性盒子的 Box Alignment 屬性如何做動。
給彈性項目排序
解釋改變彈性項目順序和方向的不同方法,並講到潛在的問題。
控制彈性項目與主軸的比例
將解釋 flex-grow、flex-shrink、flex-basis 屬性。
掌握彈性項目 wrapping
如何使用多行建立彈性容器,並控制這些行中項目的顯示。
彈性盒子的典型用例
彈性盒子常見的設計範式。
彈性盒子的向下相容
彈性盒子的瀏覽器相容性、互操作性問題、支持舊版瀏覽器和規範的版本

外部連結

規範

規範 狀態 註解
CSS Flexible Box Layout Module Candidate Recommendation 初期定義。

瀏覽器相容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

功能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本支援 20.0 (20.0) 21.0-webkit
29.0
10.0-ms
11.0
12.10 6.1-webkit
功能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本支援 (Yes) 4.4 11 12.10 7.1-webkit

文件標籤與貢獻者

此頁面的貢獻者: iigmir, 1986slayer, WynnChen
最近更新: iigmir,