Flexbox 是現代 Web 布局的主流方式之一，也是新的W3C標準規範，本教程將教你如何使用新的CSS3 Flexbox box model 更有效地創建響應式 Web 佈局！
從這 2 小時的課程，你會學到
- 自信地使用 CSS Flexbox 建立新潮的佈局
- 更有效地設計網站
- 編寫高品質和可重複使用的 CSS 程式碼
- 垂直對齊任何元素
- 利用容器中的剩餘空間
- 使用 Flexbox 設計出漂亮的反應式陳列 ( responsive galleries )
- 實現所謂的聖杯( Holy Grail )佈局
要求
- HTML 和 CSS 基礎
- 使用程式碼編輯器
說明
完成本課程後，你將能夠使用 Flexbox 做 …
- 垂直對齊任何元素
- 做出新潮的網格
- 佔用剩餘空間
- 添加元素之間的間距
- 實現完整的網站佈局
- 還有更多!
在課程中，我會回答你可能會有的所有問題。
要了解你是否能運用 Flexbox 實踐，課程中將有3個小型專案將驗證你的技能，並讓你能夠在未來的 Web 設計專案中有效地應用 Flexbox。
我的學生是如何形容我的（以下評論從我的其它課程中取得）
真是很棒的課程。這已是我跟著 Peter Sommerhoff 學習的第二個課程。
一個很棒的教師，用非常簡單的方法說明。
– Ahmed
我絕對喜歡這門課程，它教你所需要的一切細節而且更多！他們真的傾聽學生的聲音，回答的速度如路跑運動員一樣快。非常感謝你發表這課程，期待其它課程！
– Ana
很棒的課程，Peter 說明的淋漓盡致，他在一天內回答任何問題。
– Dunja
課程快速簡明地涵蓋所有需要的資訊，沒有多餘或浪費的部分。它提供足夠準確的附加資訊和文件。我覺得很有價值
– Robert
我很高興收到如此來自我的學生的好評，我會竭盡全力為你提供最好的學習。
我期待在裡面見到你:)
在本課程中，你將學習使用每個 Flexbox 屬性：
設計 flex 容器樣式：
- flex-direction
- justify-content
- align-items
- flex-wrap
- align-content
然後單獨的 flex 項目：
- order
- align-self
- flex-grow
- flex-shrink
- flex-basis
- flex
最後，我們將看一下實際的 Flexbox 範例，看看可以實現什麼樣的佈局：
- 使用 Flexbox 的簡單網格，讓所有攔都具有相同的大小
- 更進階的 Flexbox 網格，讓列可以具有任意大小
- 垂直居中對齊任何元素
- 媒體物件，流行的 OOCSS 模式
- 聖杯佈局，一個完整的網站佈局具有側邊欄( sidebars )和 sticky footer
贈品：本課程包含一個完整的 Flexbox 檢查表，你可以使用它來總結你學到的所有內容，並在使用 Flexbox 時的參考。
此外，我還提供了一個 Flexbox 展示的程式碼範例 – 它就像一個互動式的備忘錄，讓你在瀏覽器中查看包含教學中每個屬性和每個佈局的範例。
目標受眾
- 希望提高前端技能的網頁設計師和開發人員
- 想提高生產力的設計師
- 任何想跟上最新發展網路標準的人
講師介紹
Peter Sommerhoff 開發人員與軟體工程師 – 擁有20,000多名學生
嗨， 我是 Peter，很高興你來到這裡！如果你像我一樣，想要持續學習，掌握新技能，最終實現你的人生目標 — 不論是回報優渥的職業生涯、離開舒服的窩去做世界旅行，或是分享你的專業知識並幫助他人。
這聽起來像你嗎？參加我的課程，並學習很棒的程式語言、軟體設計 、生產力或任何你感興趣的內容！
我對每一位學生都深感榮幸，並將確保你有一個很好的學習體驗。當你在學習過程中被卡住時或需要任何幫助，歡迎隨時問我問題。
那麼現在就參加我的課程吧! 希望在課堂上與你見面！
課程網址♥找優惠折扣碼?
你可能會有興趣
- [線上課程] 進階的 CSS 和 Sass：帶你的 CSS 到新境界
- 更多網頁設計相關線上課程
- ★想要加強英文能力嗎？– 練好英文是最大的學習槓桿
- 使用 e-mail 訂閱 Soft & Share 內容發布 – 透過 e-mail 提早收到 Soft & Share 發布的好康訊息！
- Soft & Share 特價課程與學習資訊分享 加入這個社團追蹤特價課程與學習資訊
- 追蹤這個 Twitter ，追蹤特價課程與學習資訊
發表迴響