Как упаковать во Flexbox, так что бы при изменении размеров браузера flex-basis менялся?

Question

[Mois]

У меня есть n картинок, фиксированного разрешения, и их нужно выставить именно так как на примере, резиново:


(прокрутка совершается горизонтально)

При открытии страницы все располагается правильно, в нужных пропорциях и с нужными промежутками. Но при изменении размера браузера, ширина колонки - flex-basis (т.к. flex-direction: column) остается фиксированной. Ну и происходит это во всех браузерах, кроме Firefox.

Еще раз:
1. Когда открываю все нормально
2. Изменяю размеры браузера - все плохо:


Обновляю теперь в этих масштабах, все восстанавливается:

Вот код:
codepen.io/Mois-ilya/pen/amyWQr?editors=1100

Answer 1

[fsockopen]

Вот рабочий код на JS

window.onresize = function(event) {
  //console.log(document.querySelectorAll(".pic img")[0].style.height);
  var array = document.querySelectorAll(".pic");
  for (i = 0;i<array.length;i++){
    array[i].style.width = document.querySelectorAll(".pic img")[0].clientWidth + "px";
  }
};

Comments

[Mois]

Я это все уже пролапатил, в других источниках правда.. посмотрел здесь, ничего нового не увидил, как и решения своей проблемы!
Вполне возможно, что это просто у меня уже взгляд замутнел, но как то, нигде не рассматривается случай, когда высоту дочернего блока (при flex-direction: column) выставляешь фиксированной, а flex-basis оставляешь по дефолту auto

:'-(

[Mois]

будто при формировании страницы, flex-basis фиксированно задается? но это как то не оч

[fsockopen]

а можно по подробней с исходником вместе...я думаю что решение очень простое...но иногда нужно оотвлечся))

[Mois]

fsockopen: так вот он: codepen.io/Mois-ilya/pen/amyWQr?editors=1100

[Mois]

fsockopen: внизу самого вопроса ссылка есть

[fsockopen]

так значит ширина фикс. а высота нет...надо сделать так что бы высота была фикс?

[Mois]

fsockopen: высота дочернего блока 50% (потому что, надо что бы картинки выстраивались в таком порядке), а ширина должна быть такой же как у картинки (все картинки одинакового размера), то есть получается такая сетка.. Но по каким то причинам ширина блока выставляется изначально (как раз по размеру картинки внутри), а потом при изменении размеров окна остается той же..

[Mois]

Возможно Возможно я не так использую данную технологию? (попробуйте поменять высоту браузера, после чего обновите страницу
)

[fsockopen]

смотри выше над комментами

[fsockopen]

добавь этот код в вкладку JS и попробуй поменять экран...должно сработать

[Mois]

fsockopen: Очень благодарю, только не heigth а width, менять нужно именно ширину)

Думал есть метод css, надо было и самому посмотреть в сторону js.. (однобоко смотрел на ситуацию, ну и не прокачал пока свой скил, что бы мыслить на js)

[Mois]

fsockopen: Исправишь, отмечу решением!

[fsockopen]

это простое решение.надо еще на CSS альтернативу придумать)..P.S: Код поправил

[Mois]

fsockopen: на CSS думаю нужно было просто выравнивать все по другому, что бы flex-basis отвечал за высоту, тогда бы ее можно было задать как 50%, а там все само выпрямилось. (догадка, которую проверять в ближайшее время вряд ли буду)

[Mois]

fsockopen: К сожалению в твоем вопросе не компетентен..