Flexbox

[12th 鐵人賽] 實際操作 Part 2, Day 20

4 min read CSSITHome鐵人賽FlexboxGrid LayoutGrid SystemMedia Query
從手機版開始 在我們開始講內文之前，我們先來看看天地之間的事情。在昨天的例子中，你會發現我的 .header, .footer 都是使用 Flex 來做。這邊並不是說一定得用 Flex 如果用 Grid 就罪該萬死，回顧我一開始提到的， > Grid for layout, flex for components. 再回到 .header 來看，他對我們來說，用上 Grid 其實太過於複雜，我們所想像中的天的設計，最單純的就是 Logo 搭配選單，

[12th 鐵人賽] 模糊地帶, Day 18

5 min read CSSITHome鐵人賽2020Grid LayoutMedia QueryGrid SystemFlexbox
總結一下 > 先來一手台啤 18 天謝謝。 這些天我們聊到了關於 Media Query, Flex, Grid 以及稍微提一下 clamp()。現在你覺得什麼樣的場景實際上會需要 @media 呢？大前提就在於，當你需要 變更設計 的時候，你就得明確的使用 @media 來規範你所想要的尺寸，用以達到不同尺寸下，畫面設計上的差異。 當然，@media 不僅是只能做 尺寸 上面的事情，由於這個講起來很佔篇幅，雖然目前還不確定是否可以完賽，但，拿這些來搪塞感覺就不是很好。總之，

[12th 鐵人賽] 這不是 Media Query, Day 16

6 min read CSSMedia QueryGrid LayoutGrid SystemFlexboxITHome鐵人賽2020
Media Query 這件事情應該是講到爛掉了，我們稍微複習一下就好， @media (min-width: 32rem) {} > 收工（欸）！ 爾或者是， /* 請不要這樣做 */ @media (min-width: 90ch) {} > 等等好歹也解釋一下 ch 好的，這邊這個單位 ch 是一種字元長度單位，但是他不代表你的 字有多長，以下是 w3c [https://www.w3.org/TR/css3-values/#ch] 的解釋， > Equal

[12th 鐵人賽] Grid 格線系統 Part 2, Day 12

8 min read CSSGrid LayoutGrid SystemFlexboxITHome鐵人賽2020
容器 我們先來看 Grid 的容器，他包含了 一張試算表像是 Table 一樣的東西，為何會說他 像是 Table，我直接舉例給大家看就知道了， .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); } .item1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } HTML

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

4 min read CSSITHome鐵人賽2020Media QueryGrid LayoutGrid SystemFlexbox
各種對齊方式 前幾天都有約略提到了關於對齊的事情。今天就把最後一些關於對齊的東西一次都補上，最後來一點大補貼。 * justify-content 水平方向的對齊控制。 * align-items 垂直方向的對齊控制，需要有 height 設定才看得出效果。 * getBoundingClientRect() 拿到子元件的 所有座標點都不是你想的那個樣子。 * 元件的 margin 會算入自身尺寸， 不會出現 像是一般區塊元件 margin 會互相交疊的情況。 * 無論哪個方向所產生的間距（gap）都是瀏覽器運算結果，無法人為控制。 * 子元件若為區塊元件（Block Box），當中若有大於子元件的內容，會干擾子元件尺寸。 * 子元件若為 Flex 元件（