В родителе есть дочерние элементы, часть которых расположена в одном ряде, часть в другом.
.box {
display: flex;
flex-wrap: wrap;
border: 2px solid blue;
padding: 2px;
}
.el {
height: 50px;
border: 2px solid red;
margin: 2px;
}
.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) {
flex-grow: 3;
}
.el:nth-child(5), .el:nth-child(6) {
flex-grow: 2;
}
.break {
width: 100%;
}
<div class="box">
<div class="el"></div>
<div class="el select"></div>
<div class="el"></div>
<div class="break"></div>
<div class="el"></div>
<div class="el"></div>
</div>
Как определить, есть ли у элемента .el.select
соседи .el
справа или слева в этом же ряде?
То есть, тут должно показать, что справа есть сосет:
.box {
display: flex;
flex-wrap: wrap;
border: 2px solid blue;
padding: 2px;
}
.el {
height: 50px;
border: 2px solid red;
margin: 2px;
}
.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) {
flex-grow: 3;
}
.el:nth-child(5), .el:nth-child(6) {
flex-grow: 2;
}
.el.select {
border-color: green;
}
.break {
width: 100%;
}
<div class="box">
<div class="el"></div>
<div class="el select"></div>
<div class="el"></div>
<div class="break"></div>
<div class="el"></div>
<div class="el"></div>
</div>
Тут - что справа нету:
.box {
display: flex;
flex-wrap: wrap;
border: 2px solid blue;
padding: 2px;
}
.el {
height: 50px;
border: 2px solid red;
margin: 2px;
}
.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) {
flex-grow: 3;
}
.el:nth-child(5), .el:nth-child(6) {
flex-grow: 2;
}
.el.select {
border-color: green;
}
.break {
width: 100%;
}
<div class="box">
<div class="el"></div>
<div class="el"></div>
<div class="el select"></div>
<div class="break"></div>
<div class="el"></div>
<div class="el"></div>
</div>
И тут - что нету:
.box {
display: flex;
flex-wrap: wrap;
border: 2px solid blue;
padding: 2px;
}
.el {
height: 50px;
border: 2px solid red;
margin: 2px;
}
.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) {
width: calc(33.33333333% - 8px);
}
.el:nth-child(4), .el:nth-child(5) {
width: calc(50% - 8px);
}
.el.select {
border-color: green;
}
<div class="box">
<div class="el"></div>
<div class="el"></div>
<div class="el select"></div>
<div class="el"></div>
<div class="el"></div>
</div>