Flexbox

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

Media Query 這件事情應該是講到爛掉了，我們稍微複習一下就好， @media (min-width: 32rem) {} 收工（欸）！ 爾或者是， /* 請不要這樣做 */ @media (min-width: 90ch) {} 等等好歹也解釋一下 ch 好的，這邊這個單位 ch 是一種字元長度單位，但是他不代表你的 字有多長，以下是 w3c 的解釋， Equal to the used advance measure of the

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

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