Я пытался найти решение для CSS только для этого, но не могу придумать одно, поэтому я решил спросить.
Учитывая три деления все горизонтально сложены рядом друг с другом, когда один делениеПереходит к следующей строке, как вы можете изменить макет, чтобы они переключались на вертикальную укладку.
Я добавил фрагмент кода с кнопкой, при нажатии которой он устанавливает ширинуродительский элемент div.Предполагается, что это пример изменения размера окна, так что родительский элемент оказывается слишком маленьким, чтобы все элементы div в одной строке могли переместиться в вертикальный стек.
На данный момент яЯ использую javascript, чтобы определить, увеличивается ли когда-либо высота элемента div при изменении размера элемента, но если есть идеальное решение только для CSS.
function forceOverflow() {
let container = document.getElementsByClassName('container')[0];
if (container.className.indexOf('small') !== -1) {
container.className = "container";
} else {
container.className = "container small";
}
}
.container {
display: flex;
flex-wrap: wrap;
background: yellow;
}
.container.small {
width: 300px;
}
<div class="container">
<div>Dynamic string 1</div>
<div>Dynamic string 2</div>
<div>Dynamic string 3</div>
</div>
<button onClick="forceOverflow()">Force overflow</button>