產(chǎn)品篇

在我們的后臺(tái)中，需要設(shè)置廣告精準(zhǔn)投放的區(qū)域，也就是要在全國(guó)31個(gè)省、自治區(qū)、直轄市中選擇。那么，出現(xiàn)下面這幅景象也就理所應(yīng)當(dāng)了：

這樣做有幾個(gè)問題：

    選項(xiàng)很多，沒有規(guī)律，找起來很累
    如果是一個(gè)已經(jīng)選擇了部分選項(xiàng)的廣告，修改時(shí)仍然需要用肉眼尋找，無法一眼看出來投放到哪些省份
    選完一個(gè)，再選下一個(gè)，還要從頭找，甚至?xí)灰呀?jīng)選過的影響

于是我想，首先應(yīng)該把所有選項(xiàng)分為“已選中”和“未選中”兩批，解決第2個(gè)問題，減輕第3個(gè)問題；其次復(fù)選框本身的價(jià)值不大，可以被替換為其它樣式；唯一可能引入的問題，就是點(diǎn)選時(shí)，用戶的預(yù)期是看到復(fù)選框里出現(xiàn)一個(gè)小對(duì)勾，表示選中，如果我把它移開放到“已選中”組里，用戶可能會(huì)迷惑，需要一些時(shí)間學(xué)習(xí)。

于是我跟某產(chǎn)品經(jīng)理朋友聊了聊這個(gè)想法，他表示確實(shí)可能造成用戶迷惑，不過如果能加入動(dòng)畫效果，那么基本沒問題。嗯，開始動(dòng)手。
技術(shù)實(shí)現(xiàn)篇

近日flexbox規(guī)范定案，各瀏覽器相繼支持display:flex;，同時(shí)傳來一條好消息，新實(shí)現(xiàn)比老實(shí)現(xiàn)display:box;快很多。這次我打算用flexbox來解決問題，因?yàn)槔锩嬗幸粋€(gè)很重要的屬性：order（之前叫box-ordinal-group），它可以改變布局中元素的排列順序，配合CSS3新增的選擇器，應(yīng)該可以滿足需要。
第一步 分拆選中/未選中

（關(guān)于flexbox的知識(shí)，可以通過Google了解，雖然搜到的多是上一個(gè)版本，不過和最終版差別不大，只是叫法不同。本文不再過多講解，我就當(dāng)大家都會(huì)了）

<input type="checkbox">本身的樣式不能修改，所以我們必須借助的幫助；實(shí)現(xiàn)選中/未選中區(qū)分，那自然就要用到偽類:checked；選擇器一定是從外到內(nèi)、從前到后的，沒法選擇父級(jí)元素，所以不能用<label>去包<input>，那么最終布局就只能是：