Written by Kasumi

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

こんにちはカスミです。

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

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

上記画像が例です。

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

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

実装サンプル

See the Pen フレックスボックス 線重なり無くす by Kohei (@kouk05) on CodePen.dark

実装サンプルです。

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

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

横並び要素にネガティブマージンを入れる

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

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

目次

関連記事

プログラミング

MANPローカルサーバーで400 Bad Request errorになりサイトが表示されない【解決!ローカルのドメイン・ディレクトリ名が原因かも?】

2022.04.18
863
HTMLCSS

【CSS】横並び画像のアスペクト比率を合わせる方法

2023.04.15
939
HTMLCSS

【コピペ用】CSSでへこむボタンを作成する方法

2022.06.11
3036
HTMLCSS jQuery

【簡単CSS・jQuery】上スクロール時のみヘッダー・ナビを固定表示する方法

更新日:2022.09.09
1721