CSS 小技巧之四：用 label 設計勾選框

HTML 的表單資料，除了文字輸入之外，應用最廣泛的還有勾選框，HTML 如下：

<input type="checkbox"> 是否同意...

由於勾選框本身不大，因此很多開發者都期許一種更方便作法 - 當使用者點選說明文字時，同時觸發這個勾選框，因此誕生了 label 標籤：

<!-- label 標籤有一個屬性 for，需填入與之互動的 input id -->
<input id="test" type="checkbox"><label for="test">是否同意...</label>

當使用者點選了 label 標籤，相當於點選了 input，是不是很方便呢？
也因為 label 的這個特性，讓我們能使用純 html + css 來實現 ios 的開關。

CSS 小技巧之三：上下左右對齊

在現今以 display: block、inline、inline-block 為主的排版系統中，要做到上下左右對齊確實有難度，常常都必須借助 table 的排版系統，造成各種不便。

這次要介紹的方法是利用 text-align 與 verticle-align 實現，物件必須要是 inline-block 節點，範例所使用的 html 如下:

<ul>
    <li><img src="#"></li>
    <li><img src="#"></li>
    ...
</ul>

Javascript 等高響應佈局

今天要跟大家分享 “等高響應佈局” 的實作流程。
在討論之前，必須先認識等高響應佈局是種怎樣的佈局：

等高響應式局不同於瀑布流，瀑布流是指 ”內容寬度相同，高度不同且依高度排列排列下一行的項目”。

而等高響應佈局則是 ”每一行的內容同高、每一行切齊頭尾且內容與內容之間的寬度固定”，
可以參考 PEXELS 的呈現方式

CSS 小技巧之二：分散對齊

當我們使用 display: inline-block 排版的時候，我們能在父層設定 text-align 屬性對齊物件，
可以使用特殊的“分散對齊”方法 (text-align: justfy)，如下圖：

若有三個物件則會像以下呈現：

若有兩個物件則會像以下呈現：