CSS

[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 鐵人賽] Grid 格線系統 Part 1, Day 11

6 min read CSSITHome鐵人賽2020Grid LayoutGrid SystemMedia Query
概述 我們再重新複習一下， > Grid for layout, Flex for component. 格線系統的發展從 2011 年開始，一直到 2016 年開始進入 CR 的階段。以目前的版本來看，市面上瀏覽器的 支援程度 [https://caniuse.com/?search=grid] 看起來是相當樂觀的。 所以，到底 Grid 帶來了什麼東西？ * CSS Grid Layout Module

[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 元件（

[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%; } 關於容器內容的流向、邊界、對齊等等，我們可以簡單的說明如下，