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を使う時は覚えておくと楽です。
