flexbox（css flexible box layout module）是css3新新增乙個用於頁面布局的全新css3模組功能。它可以把列表放在同乙個方向（從左到右或從上到下排列），並且讓這些列表能延伸到占用可用的空間。較為複雜的布局可以通過巢狀乙個伸縮容器（flex container）來輔助實現，它的出現可以解決我們通過n多結構、css實現的布局方式。
我們可以通過can i use來進行相容性查詢
為什麼我這篇文章是強調flexbox在移動端的應用。總所周知flexbox是有幾個版本的。
從最初的2023年發布的舊版本的語法在宣告時使用的是：display:box;
到2023年變換為：display:flex box;
到了現在使用的是:display:flex。
儘管使用舊的語法並不是乙個聰明的做法。相對來說新的語法更容易理解和更深入、更一致的實現效果。但在移動端由於新語法還沒完全確定，所以並不支援。因此在移動端使用的時候建議採用display:-webkit-box來進行定義。
新版本語法：
display: flex;
display: inline-flex;
flex-direction:column;
justify-content:space-between;
align-items:flex-start；
舊版本語法：
CSS3 flexbox彈性布局例項
我認為當flexbox支援所有的瀏覽器時，由於它比浮動布局更加的簡單和強大性，它將徹底的改變我們的css布局方式。例如我們可以很容易的寫出乙個元素在未知比例下的居中對齊布局。當然css3新增的其它屬性，例如grid也可以給前端開發帶來更多的布局方式。下面給出一些例子來證明為什麼web開發者應該使用f...
CSS3 伸縮布局 Flexbox
display flex inline flex 彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中...
CSS3布局神器 Flexbox
display flex是css3的新特性，是乙個強大的布局神器。在傳統的布局中，通常使用浮動float position，雖然能很好進行布局，但自從接觸flex後，對前端的布局來說簡直就是一種解放。上圖為flex在各瀏覽器和裝置上的相容性問題，可見除了ie瀏覽器外基本都支援了這一特性。不過即使這樣...