在傳統的浮動、定位基礎之上，css3提供了一系列新的布局方式，包括彈性盒模型、多列、**查詢等，利用這些布局方式我們可以靈活地應對複雜網頁布局，本文通過屬性詳解、實戰案例的方式向您展示這些新興布局方式的強大之處。
1.彈性盒模型
彈性盒布局模型（flexible box layout）是 css3 規範中提出的一種新的布局方式。該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。這種布局方式在條目尺寸未知或動態時也能工作。這種布局方式已經被主流瀏覽器所支援，可以在 web 應用開發中使用。
理解這個圖
本人文筆有限,這裡我推薦別人寫得很好的教程。
附帶例子:
2.多列屬性
css3中新出現的多列布局(multi-column)是傳統html網頁中塊狀布局模式的有力擴充。這種新語法能夠讓web開發人員輕鬆的讓文字呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀序列；人們的視點從文字的一端移到另一端、然後換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。所以，為了最大效率的使用大螢幕顯示器，頁面設計中需要限制文字的寬度，讓文字按多列呈現，就像報紙上的新聞排版一樣。
但是在css3的多列布局(columns)語法功能出現之前，人們如果想讓文字呈多列顯示，要麼使用絕對定位，手動給文字分段落，或者使用js指令碼等，而新語法的出現，徹底改變了這樣的局面。
css3 布局 文字
它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的效果還是有相當大的難度，慶幸的是，css3的多列布局可以輕鬆實現 語法 columns 多列布局columns屬性引數主要就兩個屬性引數 列寬和列數。引數 引數說明 主要用來定義多列中每列的寬度 主要...
CSS3 彈性布局
掌握傳統布局與css3新增彈性布局方式的實現和應用 彈性布局 彈性伸縮布局 事實上它是一種新型別的盒子模型，也有書上稱作彈性伸縮盒布局。比較新的布局方式 旨在提供乙個更加有效的方式來布置，對齊和分布在容器之間的各項內容，即使它們的大小是未知或者動態變化的。彈性布局的主要思想是讓容器有能力來改變專案的...
CSS3布局樣式
css3多列布局columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的...