ITHome

[12th 鐵人賽] Flexbox 的使用姿勢 Part 3, Day 9

5 min read 2020ITHome鐵人賽Grid LayoutGrid SystemCSSMedia Query
你所不知道的「補白」 首先，你必須要知道這幾個常用屬性的可用值， 屬性預設值可用值justify-contentnormalflex-start,flex-end,center,space-between, space-aroundalign-contentnormalflex-start,flex-end,center,space-between, space-aroundalign-itemsstretchflex-start,flex-end,center,baseline,stretch align-selfautoauto,flex-start,flex-end,center,baseline,stretch好了，請留意兩個屬性的預設值，align-content 與 align-items 預設都是使用 stretch 。換句話說，當你什麼事情都沒有做的時候，他會幫你自動 填滿

[12th 鐵人賽] Flexbox 的使用姿勢 Part 2, Day 8

5 min read CSSMedia QueryFlexboxGrid LayoutGrid SystemITHome鐵人賽2020
流 當我們定義好一個 flex 的容器時，昨天有說過了，預設會使用 row 這個設定來定義容器的流向。所以，在容器定義好的當下，我們把基本的容器設定展開來看，另外，我們賦予他 wrap 的設定，避免當中的元件被切掉， .flexbox { display: flex; flex-direction: row; flex-wrap: wrap; /* 以上等同於 */ /* flex-flow: row wrap; */ width: 100%; } 關於容器內容的流向、邊界、對齊等等，我們可以簡單的說明如下，

[12th 鐵人賽] Flexbox 的使用姿勢 Part 1, Day 7

7 min read CSSFlexboxMedia QueryITHome鐵人賽2020
簡單介紹 雖然說 Flexbox [https://caniuse.com/?search=flex] 已經推出好一段時間了，但說實在話我自己好像沒有特別著墨。當然，我覺得如果可以的話，去看一下 Amos 的課程 [https://www.youtube.com/watch?v=_nCBQ6AIzDU&ab_channel=CSScoke] ，一定比看我在這邊講幹話來得實際！ 首先，我們先理解一下 flex 的作法， .flexbox { display: flex;

[12th 鐵人賽] 從內容開始看格線系統 Day 5

10 min read CSSMedia QueryITHome鐵人賽2020Grid LayoutGrid System
內容為王 > 如果以現在的趨勢來看，應該叫「廣告為王」。 當然我不會設計，所以也就不會設計廣告。網站主要的目的，是要傳達內容，所以關於文件流、斷點、區塊設計這些事情，在整個版面上才會這麼重要。至於你說那些內容農場，基本上都屬於廣告為王的範疇，我就不討論了。如果對於文件設計很有經驗的人，基本上可以跳過這一天沒有關係。 那麼，由於設計我不會，那這邊還是有幾件事情可以跟各位前端工程師分享。主要的前置作業，我們還是會回到前幾天所說的，與 viewport, @media 跟基本格線系統有關。 * viewport 能不能改？ * @media 怎麼設計？ * 那個 rem 單位設計。