【css】nth-childプロパティでflex下のコンポーネントに効果を追加する

display:flexを使っていると、横並びをして更に特定のコンポーネントの位置を調節したい時が

あると思います。

display:flex下で何らかの動きを加えたい場合はnth-childを指定することで

コンポーネントの位置やアニメーションを加えることができます。

使い方は以下のように効果を加えたいコンポーネントの外のdivにnth-childを加えます。

.navigate-button-box > *:nth-child(n){
margin: 0px 45px;
}

nth-childの引数には数字を指定します。例のコンポーネントを見ると、div内にはボタンが二つ

存在しています。この中で二つ目のコンポーネントのマージンを変更したい場合はnth-childのカッコに

2を指定します。

.navigate-button-box > *:nth-child(2){
margin: 0px 45px;
}

周りのコンポーネントの邪魔をせずにflex下で動きを変えられるのでflexを使う時は覚えておくと楽です。