CSS divでflex段組した際の最終段の指定方法　borderを削除したい

段組レイアウトした際、最終行のボーダーを削除したい
当初は3の倍数できっちりしていたので、簡単だったのですが、最終行に１つ、２つのときがうまくいきません。
itemが可変で9個だったり、11個だったりと変わるので、可変を考慮したCSSを実装したいのですが、なにかお知恵があれば教えて頂きたいです。
宜しくお願いします。
※JSで item の数に合わせてCSSを変更するとかはしたくないので、CSSのみで出来るようにしたいです。

html
1●当初の想定
2<div class="flex">
3  <div class="item">１</div>
4  <div class="item">２</div>
5  <div class="item">３</div>
6  <div class="item">４</div>
7  <div class="item">５</div>
8  <div class="item">６</div>
9  <div class="item">７</div>
10  <div class="item">８</div>
11  <div class="item">９</div>
12</div>
13
14<br><br><br>
15●問題発生
16<div class="flex">
17  <div class="item">１</div>
18  <div class="item">２</div>
19  <div class="item">３</div>
20  <div class="item">４</div>
21  <div class="item">５</div>
22  <div class="item">６</div>
23  <div class="item">７</div>
24  <div class="item">８</div>
25  <div class="item">９</div>
26  <div class="item">１０</div>
27</div>
28
29<br><br>
30
31<div class="flex">
32  <div class="item">１</div>
33  <div class="item">２</div>
34  <div class="item">３</div>
35  <div class="item">４</div>
36  <div class="item">５</div>
37  <div class="item">６</div>
38  <div class="item">７</div>
39  <div class="item">８</div>
40  <div class="item">９</div>
41  <div class="item">１０</div>
42  <div class="item">１１</div>
43</div>

css
1* {
2  box-sizing: border-box;
3}
4.flex {
5  display: flex;
6  flex-wrap: wrap;
7  border: 1px solid #ccc;
8  border-radius: 5px;
9  width: 600px;
10}
11.item {
12  width: calc(100%/3);
13  padding: 10px;
14}
15.item:not(:nth-child(3n)){
16  border-right: 1px solid #ccc;
17}
18.item:nth-last-child(n+4){
19    border-bottom: 1px solid #ccc;
20}

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

回答2件

追加分:
コメントでの質問の返答がないので、「カドっぽい位置にある部分はすべて角丸四角形にする」という方針でCSSを書くと、以下のようになる。

CSS
1* {
2    box-sizing: border-box;
3}
4
5.flex {
6    display: flex;
7    flex-wrap: wrap;
8    border-top: 1px solid #ccc;
9    border-left: 1px solid #ccc;
10    width: 600px;
11    border-radius: 5px;
12}
13
14.item {
15    width: calc(100%/3);
16    padding: 10px;
17    border-bottom: 1px solid #ccc;
18    border-right: 1px solid #ccc;
19}
20
21.item:last-child,
22.item:nth-child(3n):nth-last-child(2),
23.item:nth-child(3n):nth-last-child(3) {
24    border-bottom-color: red; /* 確認用 */
25    border-right-color: red;  /* 確認用 */
26    border-bottom-right-radius: 5px;
27}
28
29.item:nth-child(3n + 1):last-child,
30.item:nth-child(3n + 1):nth-last-child(2),
31.item:nth-child(3n + 1):nth-last-child(3) {
32    border-bottom-color: green;  /* 確認用 */
33    border-left-color: green;    /* 確認用 */
34    border-bottom-left-radius: 5px;
35}

以下、「角丸四角形で」という指定がなかった最初の質問に対する回答。

シンプルにこれでいいのでは。

CSS
1* {
2    box-sizing: border-box;
3}
4
5.flex {
6    display: flex;
7    flex-wrap: wrap;
8    border-top: 1px solid #ccc;
9    border-left: 1px solid #ccc;
10    width: 600px;
11}
12
13.item {
14    width: calc(100%/3);
15    padding: 10px;
16    border-bottom: 1px solid #ccc;
17    border-right: 1px solid #ccc;
18}

投稿2020/12/27 04:16

編集2020/12/28 02:30

Daregada

総合スコア11990

pinoko

2020/12/27 04:34

ご回答ありがとうございます。親のボックスに角丸を適用させているので、出来れば角丸の中でなんとかならないかと考えています。

Daregada

2020/12/27 04:42 編集

最初の質問にない条件を後付けしないでくださいな。さて、外側のボーダーを角丸四角形で描くとして、 > 最終行のボーダーを削除したいとは、どのような形状を想定しているのか(理想の結果をどのように考えているのか)質問文に書いてください。

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

自己解決

CSSのみでは難しいと思いますのでクローズします。

投稿2020/12/27 21:47

pinoko

総合スコア127

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

CSS divでflex段組した際の最終段の指定方法　borderを削除したい

関連した質問