網頁結構學 - 水平

在我們進行網頁設計圖分析的時候，我們會發現網頁的結構是由一個個的區塊所組成的，而這些區塊又可以再細分為更小的區塊，這些區塊之間的關係就像是一個樹狀結構，而這個樹狀結構就是我們所謂的網頁結構學。

我們利用這種結構之間的關係和視覺錯覺，可以很好的控制我們元件的位置和大小，讓我們的網頁看起來不但工整，還符合前端工程師的結構化設計。

網頁結構學的目的是讓我們的網頁看起來更有組織，更有條理，也可以讓設計者知道如何合理的分配網頁的空間。

水平分配

水平結構就是我們網頁的寬度，我們可以利用水平結構來控制我們網頁的寬度，讓我們的網頁看起來更有組織，這是非常常用也是非常重要的一個結構。

以下範例都是基於 Flex 基礎下實現，但我並沒有把全部可能的排列組合列出來，而是希望大家更專注在實際的應用上，而不是細節上。

平均分配

比例分配

根據上面的例子，我們可以看到我們可以利用比例來控制我們網頁的寬度，這樣的好處是我們可以很方便的控制我們網頁的寬度，而且不用擔心網頁的寬度會超出我們的螢幕。

在面對不中解析度和裝置的時候，我們依照不同情境來他配不同的分配組合，以下幾種是常見的組合。

單邊鎖定

和按比例分配的差異在於，鎖定一邊的寬度，另外一邊的寬度會自動填滿剩下的寬度（試試拖曳改變以下盒子的寬度）

單邊鎖定 + 最低寬度

自由寬度的內容搭配最低寬度使用，會讓內容擁有最低限度的展示，而不至於因為寬度太小導致內容無法正常顯示， 同時會發現，當我們改變 parent 寬度時，鎖定在一定寬度的區塊，竟然也被改變了。

單邊鎖定 + 最低寬度 + 無壓縮

即便在鎖定寬度的情況下，若寬度不足，固定管理的一方依然會被壓縮，這時候我們可以利用 flex-shrink: 0 來避免這種情況發生。

全部按照比例

按照百分比來控制分配，常見但不實用，因為會造成內容的壓縮，而且不易控制。

全部鎖定 + 等比壓縮

全部都鎖定寬度的時候，會出現壓縮比例的情況，如以下例子，即便設定了寬度均為 600px， 但是因為 parent 寬度不足，所以裡面的 區塊也會等比壓縮。

全部鎖定 + 無壓縮

全部都鎖定寬度，則會變成一個固定寬度的區塊，這個區塊的寬度不會隨著螢幕的寬度改變，必要時會出現捲軸。

水平對齊

對其左右兩邊

如果元件在水平的分佈並不需要填滿，而是需要對齊，以下幾種是常見且實用的對齊方式。

絕對置中

將子元件集合並置中

平均分散

子元件的距離都是相等的。

對齊右邊

在有些情況下，我們需要一律靠右對齊。

自然對齊（左）

如果什麼都不設，自然就是左對齊

讓我們來休息一下，繼續看下一篇吧。