webのreactと同じノリで書こうとしたら、ネイティブアプリの洗礼を受けた話。

基本、前提

普通にcssで実装するなら、、、

この辺を使えばよさそうです。

space-around、space-betweenの問題

wrapした時に行ごとに等間隔にしてしまって不恰好になる。
例えば5個の要素があって、1行に3つごとおきたい場合、

.list-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list-item {
  width: 30%;
}

などとすると3個の行と2個の行に分かれる。
その時3個は等間隔になるが、2個はその2個で等間隔になるので、5個の間隔がバラバラになってしまう。
（この場合1行目は間隔5％だけど、2列目は30％空いてしまう）

結論：wrapと組み合わせるならspace-around、space-betweenは使わない方がいい。

.list-wrapper {
  gap: 1em; 
  gap: 10px 20px; // 縦 横
}

のようにすると自動的に間隔を付けてくれる。
（もちろん端にはつけず、要素の間だけつけてくれる）

やってみたらエラーでてどうやら使えないものだということを悟った、、、

widthとmarginだけで解決しよう

例えば3分割したいなら、
30% 5% 30% 5% 30%で分ければ良いので

.list-item {
  width: 30%;
  &:not(:nth-child(3n)) {
    margin-right: 5%;
  }
}

という実装ができる。

何とこっちも使えない。
エラーが出るのではなく、単純にnth-child部分が無視された表示になった。
どうやらnth-childのみならず、last-childとかも含めて使えないらしい。

ということでそれにあたるロジックを自分で書く必要があった。

今回はstyled-componentsでの実装。

ロジックはcss内に書くこともできるのかもしれないが、なんか上手くいかなかったのでjsx/tsx内で解決した。

方針としては解決2と似ていて、nth-childの代わりにmap時のkeyに使われるidxを使って分岐させる処理を書く。

まずはnth-childしたかったcomponentにmarginRightというpropsを追加。

{datas.map((data, idx) => {
  return (
    <YourStyledComponent marginRight={idx % 3 === 2 ? '0%' : '5%'}>
    </YourStyledComponent>
  )
})}

と三項演算子で分岐処理を実装。
idxは0スタートなので、こうすることで3n番目の要素のみmarginRightを0にできる。

これをstyled componentで受け取る。

const YourStyledComponent = styled.View<{marginRight: string}>｀
  width: 30%
  margin-right: ${({marginRight}): string => marginRight}
｀

これでいけました。