https://qiita.com/kijitora-neko/items/4a79719af56da17c3cc8
上記を参照
+ は「次の要素」という意味らしい
実際にやったコード
.gazoulist {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 1180px;margin: auto;
border: 1px solid #000000;
}
.item{
background-color: #67A0B8;
width: 294px;
height: 300px;
}
.item + .item{border-left: 1px solid #000;}
.gazoulist::after {
display: block;
content:””;
width: 30%;
}
@media screen and (max-width: 1024px) {
.item{
background-color: #67A0B8;
width: 50%;
height: 300px;
}
.gazoulist {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;margin: auto;
}
}
<div class="gazoulist">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>