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

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

Ads

関連記事

HTMLCSS WordPress プログラミング

wordpressのメディアから任意の画像ファイルを素早く呼び出す方法【簡単】

2021.12.23
13
HTMLCSS プログラミング

inputタグのラジオやチェックボックスをボタン画像にする方法

2021.01.04
246
HTMLCSS

CSSだけでborder線にグラデーションを入れる方法【角丸も付ける】

2022.06.17
43
WordPress プログラミング

wordpressで特定のページを非表示にし404ページへリダイレクトする方法

2022.01.15
62