2021.03.02

flexbox(フレックスボックス)で横並びにした要素の線の重なりを無くす方法

こんにちはカスミです。

さて、以下のようなお悩みをお持ちでしょうか？

flexboxで横並びにした要素をボーダーで囲っているが、隣接する要素のボーダーとの兼ね合いで線が太くなってしまう箇所がある。これを改善したい。

上記画像が例です。

ボーダーが重なっている部分に太い箇所が見られるのが、わかるかと思います。

このような問題を解決致します。

実装サンプル

実装サンプルです。

フレックスボックスで横並びにした要素にボーダーを入れてますが、線が太い箇所が改善されているのがわかります。

次章より詳細を説明します。

.flex-item {
  padding: 30px;
  flex: 0 0 25%;
  background-color: #fff;
  border: 1px solid #000;
  margin-left:-1px;
  margin-top:-1px;
}

上記コードは先ほどのサンプルから横並び要素に当たってるCSSを取り出したものです。

このコードの中の以下が重要になります。

  margin-left:-1px;
  margin-top:-1px;

上記ネガティブマージンをボーダーの太さ分だけ当てる事によって、隣接するボーダーの太い箇所を改善させる事が出来ます。

これだけで改善完了です。

「table」で構築すると、ボーダーの重なり問題は無いのですが、フレックスボックスでやるとわりと陥る現象でした。ぜひ本記事の内容を参考に改善してみてください。

以上で解説を終わります。