Как разместить элементы произвольной ширины друг под друга при соприкосновении?

Question

[weranda]

Привет.
Что-то, как-то я недопойму. Есть ли возможность решить задачу без JS и на флексах?
Есть три блока, идущих в один ряд. Блоки могут иметь произвольную ширину. Вот они:

Нужно сделать так, чтобы при уменьшении размеров окна браузера при соприкосновении блоков сначала третий блок «уезжал» под первый. Вот так:

А потом при дальнейшем уменьшении окна браузера, второй блок уезжал под первый, а третий — размещался бы под вторым. Вот так:

Подскажите, пожалуйста, есть ли решение?

P.S.
Вот пример HTML.

Comments

[Ankhena]

Вроде стандартное поведение флексов
+ margin-right auto для второго элемента

[Сергей delphinpro]

у третьего убрать отступ слева, а второму добавить отступ авто справа.

[weranda]

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

[Ankhena]

weranda, в вашем тексте противоречие, но ладно, поведение понятно.
Пока думаю, что без js не выйдет

[Kentavr16]

Ankhena, weranda, а по старинке флоатами?

[Ankhena]

Kentavr16, и что это меняет? Ширину расставьте по-другому и 2 и 3 снова встанут на одну строку.

Answer 1

[Kentavr16]

Это имел в виду?

Comments

[weranda]

Нет, не то это. Поясню. Если сделать случайную ширину элементов, то при достижении определенного размера ширины окна браузера элементы в зависимости от их ширины и доступной ширины контейнера не будут идти именно в той очередности, в которой показал я на примере в вопросе. Вот вам наглядный пример из вашего примера:

А надо чтобы была универсальная логика при любых ширине элементов и ширине окна браузера, т. е. при любом раскладе: третий элемент уходит на второю строку первым, второй — на вторую вторым и никак иначе. Тут, наверное, все-таки, JS нужен.

[Kentavr16]

weranda, изменил пример. Очередность соблюдается при любых размерах. Это то же практически что перенос слов в строках. Или дополни запрос если я не понял проблему.

[weranda]

Kentavr16, Если установить значения контейнеров, к примеру, в 250, 625 и 75 пикселей, то этот пример не сработает.

Answer 2

[rootnoroot]

значение minmax задайте

Answer 3

[UthvfyV]

Допустим. 3 блока.

<div class="blocks">
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
</div>

Тогда.

.blocks {
width: 100%;
}
.block {
width: 30%;
display: inline-block;
}

/* Уменьшаем размер экрана.
размер экрана 1026px */

@media screen and (max-width: 1026px) {
.blocks {
width: 80%;
}}
/* При длинне общего блока 80% от всей длинны экрана последнему блоку места не хватает, он спрыгивает вниз. */
/* А при длинне общего блока 50% уже и 2 блоку мало места, и что вам и надо, они дружно выстраиваются один под другим */  
@media screen and (max-width: 900px) {
.blocks {
width: 50%;
}
.block {
width: 100%;
}}

media screen and (max-width: 900px) {}
Вот этой конструкцией вы задаёте стили для элементов в зависимости от размера экрана. Т.е. при размере максимальной длинны экрана (max-width), width это длинна, 900px, ваши эдементы имеют такие-то параметры. Это назыается адаптивная вёрстка.

media screen and (max-width: 1026px) Размер для media, к прмеру 1026px, определяйте по месту. Как определить, это уже другая тема. По желанию могу ответить.