Milk+ea

Weblog Is My Hobby.

【Stylish】ニコ動の検索を5列にする

モニタでかいとダメかも。

niconico GINZA search (5列) - Themes and Skins for Nicovideo - userstyles.org

初めてflexを使ってみた。
flex使うと下みたいなのがfloatやclearを使わないで済むから慣れたらすごく楽。


こんな感じ。

.parent{
  display: flex;
  flex-flow: row wrap;
}

.childs {
  flex: 0 0 calc(49% - .5em);
  margin-bottom: .5em;
}

.childs:nth-of-type(2n+1) {
  margin-right: .5em;
}

Chromeしかflex-wrapに対応してないのが残念。

本当は要素間の空白は、align-contentとjustify-contentを当てにしてたんだけどダメだった。
align-contentは親要素の高さが分かってないと厳しいし、横の空白はjustify-contentの「space-between使えばいけるかなぁ」と思ってたけど最初の要素の左側にも空白ができてうまくいかなかっった。原因も不明。space-aroundじゃないのは確認した。

そもそも普通ならclearを使うようなレイアウトにflexを使うのがアレだと思った。
でもあえて使う。困ったらmarginグ