今日目標: 學習 Polymer Layout各種使用方式

Polymer提供了聲明式的佈局宣告，是基於 CSS Flexbox 建構而成，透過Polymer加持，可以在 element上面設定屬性就完成佈局。這方便的實作是寫在 layout.html ，所以只要有使用到任何自定標籤就可以用。

這篇我是邊看官網教學邊做範例，想知道更多更詳細的教學請看 這裡

下面的範例為了快速測試，我直接用EZoApp線上工具進行測試，本機沒有安裝Polymer環境，而想要試玩的可以直接到 這裡

首先我們先準備好幾個 <div> 並加上邊框，方便等下加上layout是觀看效果

左邊是網頁顯示結果，右邊是html 寫法

Horizontal 和 Vertical Layout

layout 搭配 (start center end) 屬性

當在元素上加上layout屬性後，立馬就成為 flex 容器，我們可以選擇水平(Horizontal) 或 垂直(Vertical) 佈局方式，另外我們還可以直接在 flex 容器上，設定 start 或 center 或 end 來決定容器內元素的擺放位置，如果不設定的話，預設容器內的元素會自動撐大到垂直佈局寬度或水平佈局的高度

flex 搭配 (one , two , three) 屬性

在 flex 容器內的元素，可以加上 flex 來進行空間分配，分配權重可以直接用 one , two , three 來表示分配權重，相當簡潔易懂

先來看水平佈局加上 Flex 分配權重的Demo

Horizontal Layout + Flex

再來是垂直佈局加上 Flex 分配權重的Demo

Vertical Layout + Flex

Justification

在flex容器或內部元素，可以搭配 *-justified 來控制，可以參考這篇的解釋

vertical layout start

vertical layout center

vertical layout end

vertical layout start-justified

vertical layout center-justified

vertical layout end-justified

另外還有 Self alignment , wrap 等屬性，由於都是設定就有效果，所以請直接參考官網吧 XD

好了，現學現賣。學了一些佈局技巧，就讓我們將前天的範例加上佈局吧~

[線上範例動手玩]

這範例加上了控制水果籃佈局方式 (垂直或水平擺放水果位置 @@a )

[Github]

第22~25行 用來產生toggle-button也就是下面這個元件，當按下時，呼叫layout function

第27行 水果籃元件加上了 layout屬性，所以只要添加 vertical 就變成垂直佈局了

第29~36行 判斷目前是否切換成垂直佈局，是的話進行處理

實際玩看看可以發現，改 layout只是設定元素屬性，很直覺方便 ^^