回答編集履歴
1
デモの注意点追加
answer
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
このようなボックスに重ね合わせのあるデザインであれば、flexを使わず、双方positionをabsoluteにしてleftとright、topで位置決めをしてあげたほうが簡単な実装になるのではと思います。
|
|
2
2
|
互い違いは` :nth-child(2n)`を利用し、leftとrightの値を逆にすれば良いです。
|
|
3
3
|
|
|
4
|
-
[codepenでのデモ](https://codepen.io/haruyan-hopemucci/pen/GRWzweE)
|
|
4
|
+
[codepenでのデモ](https://codepen.io/haruyan-hopemucci/pen/GRWzweE)
|
|
5
|
+
|
|
6
|
+
※デモは質問文のコードは全く参照せず作っていますのでこの手法を利用するのであれば現状のコードにうまくアダプションさせてください。
|