flexbox ボーダーを隣接したセル（flexの子要素）と重ねて表示したい

前提・実現したいこと

フレックスボックスを使ってレスポンシブのページを作っています。
デザインでボーダーが隣接しており、そのまま作ると隣接する部分だけ
ボーダーが太くなってしまいます。
この太くなるボーダーを1pxで表示したいです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta charset="UTF-8">
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	<meta http-equiv="X-UA-Compatible" content="ie=edge">
8	<title>Document</title>
9</head>
10
11<style media="screen">
12	ul {
13		display: flex;
14		flex-wrap: wrap;
15		align-items: stretch;
16		align-content: stretch;
17	}
18
19	ul li {
20		display: flex;
21		align-items: center;
22		border: 1px solid #eaeaea;
23		border-collapse: collapse;
24		box-sizing: border-box;
25		flex: 0 0 24.5%;
26		padding: 10px;
27	}
28</style>
29
30<body>
31	<ul>
32		<li>
33			テスト
34		</li>
35		<li>
36			テストテストテストテストテストテストテストテストテストテスト
37		</li>
38		<li>
39			テスト
40		</li>
41		<li>
42			テスト
43		</li>
44		<li>
45			テスト
46		</li>
47		<li>
48			テスト
49		</li>
50		<li>
51			テスト
52		</li>
53	</ul>
54</body>
55
56</html>

試したこと

border-collapseはdisplayでテーブルを指定しなければならないため出来ず、
詰まっております。
よろしくお願いいたします。

行動規範の内容に同意します

回答3件

ネガティブマージンで相殺はアウトです？

css
1    ul li {
2        display: flex;
3        align-items: center;
4        border: 1px solid #eaeaea;
5        box-sizing: border-box;
6        flex: 0 0 24.5%;
7        padding: 10px;
8        margin-left:-1px;
9        margin-top:-1px;
10    }

投稿2018/03/22 09:00

sousuke

総合スコア3828

stampdoor

2018/03/22 09:19

こちらの方がよりキレイですね。

zak

2018/03/23 17:57

自分の環境（Win10chrome最新）ではこの方法ですとブラウザの縮小・拡大するときに一部のボーダーが太くなってしまいました。。。簡易的なものであればこの方法もよさそうですね。教えてくださりありがとうございます。

行動規範の内容に同意します

ベストアンサー

css
1    ul {
2        display: flex;
3        flex-wrap: wrap;
4        align-items: stretch;
5        align-content: stretch;
6    }
7    ul li {
8        display: flex;
9        align-items: center;
10        border: 1px solid #eaeaea;
11        border-left-width: 0;/* 一旦左の線を0にする */
12        border-collapse: collapse;
13        box-sizing: border-box;
14        flex: 0 0 24.5%;
15        padding: 10px;
16    }
17    ul li:nth-child(4n+1) {
18        border-left-width: 1px;/* 列の左側の要素だけ、左の線を表示 */
19    }
20    ul li:nth-child(n+5) {
21        border-top-width: 0;/* 2列目以降は上の線を消す */
22    }

投稿2018/03/22 09:42

編集2018/03/22 09:46

kszk311

総合スコア3404

zak

2018/03/23 17:53

SP表示の際一列のカラム数が変わる場合は疑似クラスを打ち消す必要がありますが、現状ですとこれが一番丁寧なやり方ですかね？教えてくださりありがとうございます。

kszk311

2018/03/24 01:47

必要な箇所だけにボーダーを当てているので、厳密にいくならこれがいいと思います。自分がしっくりくるやり方でいいと思いますよ。 PCのときSPのときで条件を分けてnth-childを変えればできます。幅指定のレスポンシブなら、PC内SP内のメディアクエリ内でそれぞれ指定すれば、打ち消しも要らなくなります。

行動規範の内容に同意します

カラム落ちせずに１ラインという制約はありますが、
単純にborderの制御ではまずいのでしょうか？

ul li{
     border: 1px solid #eaeaea;
     border-right: none;
}
ul li:last-child{
     border-right: 1px solid #eaeaea;
}

投稿2018/03/22 08:57

stampdoor

総合スコア483

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！