css3 flex 筆記

flex 六角線上模擬器

為了要精進自己的切版技術,我報名了六角的網頁切版直播班,這幾天都在惡補 flex 的課程,以下就是我這周在上課做的筆記。

傳統的 float 排版只能左右流動,因此無法應對現在多元的排版方式。Ex:置中、垂直、等距等等。

flex 不只解決這些問題,還比 float 更有彈性,了解 flex 之後就可以做出更多樣化的網頁排版,所以 flex 是現在前端必學的超強大排版方式!

Week02-Flexbox 網頁排版術

這個禮拜切版直播班的主題是期待已久的 Flex !!!

以前在學 float 跟 flex 都傻傻分不清楚,透過直播班還沒開課之前老師釋出的「Flex 精神時光屋」的教學與練習,幫助我釐清複雜的 Flex ~~

學會 Flex 真的讓排版更輕鬆,省掉 marginpadding 推來推去的麻煩!

這次切版直播班老師帶我們看了很多網頁的範例,透過互動回答也幫助我複習了 flex ,對 flex 的使用也更了解。

week01 - 1px 也不差的版型控制術

為了精進自己的切版能力,報名了六角學院推出的網頁切版直播班,這次上課讓我收穫很多,有複習到舊觀念也有增加新知識,以下為第一周上課的筆記。

Emmet

老師有建議想要提升切版速度,熟悉 Emmet 很重要,也可以減少打錯字找不到 bug 的狀況出現。

所以本周作業嘗試著全程使用 Emmet 做練習,雖然有些不習慣,但是真的有減少之前常常打錯字的問題。


keybr 英打練習

我的 keybr profile 連結

熟練英打也可以提升切版速度,因為有報名 21 天英打鍛鍊武道大會,所以持續都有在練習,也發現每天練 10 分鐘,真的可以積沙成多,每天都有進步一點點。