Search
新的 flexbox 技術重新定義了使用 CSS 版面配置的方法，這個免費課程前13個影片主要是讓你瞭解 Flexbox 的基礎 – 將深入探索 rows、columns 、axes、wrapping、alignment、centering和 layout。後面7個是程式碼，從 Navigation 到行動應用程式的佈局完全運用 Flexbox
> 更多 Wes bos 系列課程請參考 https://goo.gl/BoClD1
https://softnshare.wordpress.com/2017/07/03/what-is-flexbox/
Web頁面的佈局，我們常見的主要有「浮動佈局（float）」、「定位佈局（position）」、「行內塊佈局（inline-block）」、「CSS3的多欄佈局（Columns）」、「伸縮佈局（Flexbox）」以及「網格佈局（Grids）」等。
((原來有那麼多種佈局阿，學習了))
http://www.w3cplus.com/css3/css3-grid-layout.html
[WebTech #63] CSS > 4. CSS 範例 > 4-3 排版相關語法
CSS 最早被發明的原因，就是用來把「排版」這件事，從 HTML 身上抽離，讓 HTML 能夠專心標記「文章結構」（標題、小標、段落...）。至於標題要用什麼字型、幾點字、是否對中...這些事，就統一交給 CSS 執行。
本篇將介紹 CSS3 排版相關語法的範例。透過了解這些範例，並參照下方的 CSS 參考手冊，相信您就能了解 CSS 排版語法的全貌了！
排版語法介紹： http://www.netmagazine.com/tutorials/master-new-css-layout-properties
一個複雜版面的範例： http://www.netmagazine.com/tutorials/create-fluid-layouts-html5-and-css3
排列出「內縮」版型的範例： http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/styling-simple-nested-comments-with-css/
多欄排列：
- 簡介： http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/an-introduction-to-the-css3-multiple-column-layout-module/
- 範例： http://www.hongkiat.com/blog/css3-multi-columns/
文字框排列： http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/
最棒的 CSS Selector 或 Properties 線上參考手冊：
（進入後，Selector 在中央，Properties 在左下選單）
http://www.w3schools.com/cssref/css_selectors.asp
CSS Columns are awesome! You can easily create multi-column, repsonsive layouts WITHOUT media queries ... ... <看更多>
css columns 在 CSS column 教學| 卡斯伯Blog - 前端，沒有極限 的推薦與評價
CSS column 對於文字排版有很大的幫助，就類似Adobe indesign在文字排版時，只要指定文字欄數，再將文字全部匯入即可。這樣在文字編排時則會以內容為 ... ... <看更多>