Flexboxでborderの重なりが気になる場合

結果だけ先に書くと

.flex-item {
  /* border: 1px solid black; */
  box-shadow : 0 0 0 1px black;
}

border: 1px solid black; だと下みたいに、borderが重なる時に太くなっちゃう。

box-shadow : 0 0 0 1px black; だと内側に影として枠線をつけるので、重ならない！

参考

<div id="flex-container">
  <div class="flex-item">flexアイテム１</div>
  <div class="flex-item">flexアイテム２</div>
  <div class="flex-item">flexアイテム３</div>
</div>

#flex-container {
  display: flex;
  width: 600px;
}
.flex-item {
  width: 200px;
  padding: 10px;
  text-align: center;
  /* border: 1px solid black; */
  /* ↓↓↓ */
  box-shadow : 0 0 0 1px black;
  background-color: gray;
}