2019年03月11日(月)

CSSだけで簡易的なリストのソート

• 0
• 44
• 10
• 14

Result

See the Pen Sort Elements with Flexbox (Pure CSS) by kachibito
(@kachibito) on CodePen.

選択したグループに該当するアイテムだけが上位にソートされる、という簡易的なもの
Flexboxで並べて、radioボタンで作られたボタンにチェックが入るとorder:-1;が有効化され、上位に表示されます

css

.products__sort { display: flex; flex-flow: wrap; } .products__wrap { display: flex; flex-flow: wrap; margin: 25px 0 0; } .products .sort-radio { display: none; } .products .sort-radio[id="app"]:checked ~ .products__wrap .product[data-product-type="app"] { order: -1; background-color: #007888; color...