カラーミーテンプレートを作るにあたり、極力jsを使わずにhtmlとcssだけで作ってしまおうと決めていたのでドロワーメニューやアイコンの変形など、checkboxを多用しました。
スライドもcssだけで作ってやろうかと思っていたのですが、php(カラーミーはsmarty)で呼び出すファイルにjsなしでどうやってidを割り振るのかという問題にぶちあたり大人しく諦めました。（よく見るとカラーミーキットにはslick.jsが元々入ってましたし楽で早い方をチョイス）
checkboxも、使わなかったらきっとすぐまた詳細忘れるので備忘録残しておきます。
いつか役に立つかも知れない。
checkboxとflexの可変box
hoge1〜3をクリックで変形（checkboxなので、他をクリックしても変形が戻らないのが弱点）
See the Pen checkbox by Takashi Abe (@TakeshiAbe) on CodePen.
＊Wordpressでは全く動作しなかったので代わりにCodePen貼っときます。
type=”checkbox”を type=”radio”にするとこうなります。
↓
See the Pen css radio button by Takashi Abe (@TakeshiAbe) on CodePen.
かんたんな解説
#flexboxはflex。子要素の幅を変えたいなら flex-wrap:wrap; にしておかないといけない。
#flexboxの子要素それぞれにinputとlabelを用意し、flexの並び順は全て order:2; にしておく。
余談ですが、labelの中にhタグを入れるのは非推奨だそうです。今回はじめて知りました。
inputにチェックが入ったら直後のdivのwidthを100%に。並び順は１にする（ordre:1;）。
