Contents
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 ,追蹤特價課程與學習資訊
你必須登入才能發表留言。