Как правильно сделать расположение боков во flexbox?

Question

[Sys_loc]

Добрый день, помогите сделать адаптивные блоки во flexbox.

Answer 1

[NaN]

https://codepen.io/ViktoriaKorneva/pen/jOOyXEj

Comments

[Sys_loc]

Спасибо, а не подскажите что делать с 3 блоком в котором выводится динамическая информация, и периодически этому блоку нужно больше места, и он пытается вылезти за границы.

[NaN]

Sys_loc, за границы чего? возможно стоит установить для него минимальную высоту

[Sys_loc]

NaN, за границы основного контейнера.


Вот по поводу минимальный высоты.

Минимальная высота привяжет его к определенному разрешению, я думал избежать использования медиа запросов? Или это не возможно? Автономным его не получится сделать?

[NaN]

Sys_loc, Я если честно не очень понимаю, все блоки у вас должны увеличиваться и уменьшаться в зависимости от контента в них. если вам нужно сделать блок 1 и контейнер с 2 и 3 блоком одинаковой высоты - считайте через js и берите большую высоту и присваивайте другому. У вас не должна быть задана какая-либо фиксированная высота

[Sys_loc]

NaN, более или менее ясно, как исключить блок 3 из общего влияния flex? Либо вынести блок 3 под блок 1. Благодарю.

Answer 2

[Andrej Sharapov]

<div class="flex">
  <div class="block">1</div>
  <div class="block">
    <div class="flex column">
      <div class="block">2</div>
      <div class="block">3</div>
    </div>
  </div>
</div>

<style>
  .flex {
    display: flex;
  }

  .column {
    flex-direction: column;
  }
  
/* для демо */
  .block {
    min-width: 100px;
    min-height: 100px;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
  }

</style>

Comments

[Sys_loc]

Как быть с 3 блоком если контент в нем выходит за пределы, что вызывает расширение контейнера.
Правильно и можно ли сделать красиво без медиа запросов?

[Sys_loc]

Даже не контент, а ширина для контента (например min-height: 275px;)

Если сделать полностью самостоятельным(адаптивным его нельзя) когда он сам будет определять себе стенки и сползать при определенном разрешении на новый ряд.

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