Использование flexbox для обертывания всех или всех

Есть ли способ добиться следующего?Использование flexbox для обертывания всех или всех

Начиная с трех элементов в одной строке, если общая ширина превышает ширину родительского элемента flex, привязывайтесь к ориентации столбца.

Основным ограничением для решения для моего конкретного случая использования является то, что я не могу использовать медиа-запросы, чтобы обмениваться гибким направлением, хотя это, вероятно, было бы самой легкой задачей.

Медиа-запросы не являются жизнеспособным решением в этом случае, поскольку компонент является автономным и может быть размещен в различных местах, которые будут определять ширину контейнера независимо от ширины браузера. Если есть какая-то магия, в которой медиа-запросы могут основываться на родительском контейнере, а не на странице, это было бы потрясающе, но пока я не видел ничего подобного.

В этом fiddle второй div с более длинными именами должен быть завернут в три строки, но ближайший я могу получить две строки.

<div class="container"> 
    <span class="item">Dan Martinez&nbsp;</span> 
    <span class="item">@DanMartinez101&nbsp;</span> 
    <span class="item">an hour ago&nbsp;</span> 
</div> 

<br/> 

<div class="container"> 
    <span class="item">Someone with a really long name&nbsp;</span> 
    <span class="item">@AndAReallyLongHandle&nbsp;</span> 
    <span class="item">about three million years ago&nbsp;</span> 
</div> 

.container { 
    display: flex; 
    flex-wrap: wrap; 
    width: 400px; 
    background-color: 'red'; 
} 

.item { 
    white-space: nowrap; 
    flex: 0 1 auto; 
}

источник

2015-11-15 Daniel Armando Martinez

Это собирается требовать JS. –

* ... медиа-запросы не могут использоваться для замены направления flex ... * Не верно. «flex-direction» можно легко изменить с помощью медиа-запроса. –

@Michael_B Извините за то, что я не уточнил это ограничение. Я имел в виду, что, хотя это будет работать и будет самым простым решением, я не смогу сделать это в текущем приложении. Я уточню свой вопрос, чтобы быть более ясным. –

Проблема может быть решена с помощью container queries. Однако ни один из поставщиков браузеров не реализовал его (спецификация не завершена, AFAIK).

В то же время вы можете использовать polyfill: https://github.com/mlrawlings/containerqueries

источник

2015-11-19 01:32:55 tungd

Использование flexbox для обертывания всех или всех

ответ

Смежные вопросы