Какой селектор CSS можно использовать для выбора элемента флекс-бокса в обернутом состоянии?
у меня естьdisplay:flex
строка с 3 столбцами иflex-wrap
включен. Между столбцами есть ручкаdiv
s. Когда столбцы обернуты, ручкаdiv
с должен исчезнуть. Как я могу использовать состояние переноса в качестве селектора CSS, чтобы определить атрибуты для того случая, когда объекты flex оборачиваются?
section {
display: flex;
flex-wrap: wrap;
background-color: lightgray;
}
section * {
margin: 1ex;
background-color: white;
}
section * ~ * {
margin-left: 0;
}
.handle {
width: 1ex;
background-color: gray;
}
aside, article {
flex: 1;
min-width: 5em;
}
#wide {
width: 30em;
}
#narrow {
width: 10em;
}
<section id="wide">
<aside>
left
</aside>
<div class="left handle"></div>
<article>
middle
</article>
<div class="right handle"></div>
<aside>
right
</aside>
</section>
<hr>
<section id="narrow">
<aside>
top
</aside>
<div class="left handle"></div>
<article>
middle
</article>
<div class="right handle"></div>
<aside>
bottom
</aside>
</section>
В режиме без переноса мне нужно подавить левое поле, а в режиме с переносом верхнее поле и маркеры должны быть подавлены. Как узнать, когда в упаковке?