Как настроить отзывчивый макет, который оборачивается на основе ширины/обертывания контента вместо точек перерыва CSS? ⇐ CSS

[Anonymous]

У меня есть компонент Vue.js с панелью инструментов, которая содержит три раздела: действия, фильтры и поиск с помощью кнопок. В текущей реализации используются точки останова CSS для управления упорядочением макета, но это вызывает раннее изменение порядка, когда все еще достаточно горизонтального пространства. Если не хватает места, вызванного длиной секции фильтра, мы переупорядочиваем разделы, так что фильтры появляются на второй строке: поиск/кнопки все еще находятся на первой строке с действиями. Если тогда не хватает места для фильтров на одной линии, они завершаются на следующую строку; Если не хватает места для поиска/кнопок, чтобы быть на первой строке с действиями, они перемещаются на третью строку после того, как фильтры уже были перестановлены. src = "https://i.sstatic.net/lqfdr1c9.png"/>
Это то, что у меня сейчас используется точка останова XL (1920px и больше):
Сама панель инструментов:
):
Панель:

Код: Выделить всё

:class="[
'px-4',
'd-md-flex',
'align-start',
'flex-wrap',
'flex-row',
'flex-xl-nowrap',
]"
style="column-gap: 12px"
>




:class="[
'd-flex',
'align-center',
'table-filters-header',
'flex-wrap',
'order-3',
'order-xl-2',
]"
style="column-gap: 8px; flex-basis: 100%"
>



:class="[
'ml-md-auto',
'my-1',
'd-flex',
'align-center',
'order-2',
{ 'order-xl-3': !split },
]"
>





< /code>
По сути, это то, как он выглядит в простых html /css: < /p>


.toolbar {
display: flex;
flex-wrap: wrap;
flex-xl-nowrap: true;
}
.filters {
order: 3;
order-xl-2;
flex-basis: 100%;
}
.buttons {
order: 2;
order-xl-3;
margin-left: auto;
}< /code>

[Action buttons]
[Filter1] [Filter2] [Filter3] etc.
[Search] [Buttons]

Подробнее здесь: https://stackoverflow.com/questions/797 ... apping-ins