Это возможно с flexbox

Question

Я перепробовал все, что знаю в css, чтобы заставить работать этот макет, мне не удалось.Возможно ли даже сделать эти макеты (с разным разрешением) с помощью flexbox.

Это легко сделать с помощью float, но я не могу сделать это с помощью flex.Предложения?

Фрагмент:

*{box-sizing:border-box;}
#container {
display: flex;
width: 500px;
flex-wrap: wrap;
}
#green{background: green; width: 70%; height: 100px}
#yellow{background: yellow; width: 30%; height: 200px;}
#red{background: red; width: 70%; height: 70px;}

@media screen and (max-width: 600px){
#green{width: 100%;}
#yellow{width: 50%; order: 3}
#red{width: 50%}
}

<div id="container">
  <div id="green"></div>
  <div id="yellow"></div>

  <div id="red">^^^^ this space is the issue</div>
</div>

Answer 1

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

*{box-sizing:border-box;}
#container {
display: flex;
width: 500px;
flex-wrap: wrap;
flex-direction: column;
height: 300px;
}
#green{background: green; width: 70%; height: 100px; }
#yellow{background: yellow; width: 30%; height: 200px; }
#red{background: red; width: 70%; height: 70px; }

@media screen and (max-width: 600px){
#container { flex-direction: row; max-width: 100%; height: auto; }
#green{width: 100%; }
#yellow{width: 50%; }
#red{width: 50%; height: auto; }
}

<div id="container">
  <div id="green"></div>
  <div id="red"></div>
  <div id="yellow"></div>
</div>

Answer 2

Да, это возможно с гибкой коробкой.То, что вы хотите сделать, это:

Макет 1:

Разделите Макет на два наименования - влево-контейнер & правый контейнер , где зеленое поле и красное поле будет в левом контейнере и месте желтого цветакоробка в в правом контейнере .И применить display: flex to layout, чтобы вы могли достичь этого идеально.

.container {
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.left-container {
  width: 60%;
  min-height: 400px;
}
.green-box, .red-box, .yellow-box {
  width: 100%;
  margin-bottom: 1%;
}
.green-box {
  background: green;
  height: 50%;
}
.red-box {
  background: red;
  height: 49%;
}
.right-container {
  width: 39%;
  min-height: 400px;
}
.yellow-box {
  background: yellow;
  height: 100%;
}

<div class="container">
  <div class="left-container">
    <div class="green-box"></div>
    <div class="red-box"></div>
  </div>
  <div class="right-container">
    <div class="yellow-box"></div>
  </div>
</div>

Answer 3

Посмотрите, поможет ли это

* {
  margin: 0
}

.topBox,
.leftBox,
.rightBox {
  padding: 5px;
}

.topBox {
  background: green
}

.leftBox {
  background: red
}

.rightBox {
  background: yellow
}

.row {
  display: flex
}

.leftBox,
.rightBox {
  width: 50%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .wrapper {
    position: relative;
    padding-right: 30%;
    min-height: 100vh;
  }
  .rightBox {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    width: 30%;
  }
  .leftBox {
    width: 100%
  }
}

<div class="wrapper">
  <div class="topBox">
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
    content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
    versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
  <div class="row">
    <div class="leftBox">
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
      content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
      versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
    <div class="rightBox">
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
      content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
      versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
  </div>
</div>

Answer 4

Вы можете сделать что-то подобное и продолжить, второй макет нуждается в помощи позиционирования :

* {margin: 0; padding: 0; box-sizing: border-box}

#container {
  display: flex;
  flex-flow: column wrap;
  position: relative;
  width: 500px;
  height: 500px;
  padding: 5px;
  border: 2px solid;
}

#container > div {
  margin: 5px;
  border: 2px solid;
}

#green {background: green; flex: 0 1 calc(50% - 10px); position: relative}
#red {background: red; flex: 0 1 calc(50% - 10px)}
#yellow {background: yellow; flex: 1}

@media (max-width: 600px) {
  #green {flex: 1}
  #red {width: calc(50% - 15px); height: calc(50% - 5px); position: absolute; left: calc(50%); bottom: 5px}
  #yellow {flex: initial; width: calc(50% - 10px); height: 50%}
}

<div id="container">
  <div id="green">Green</div>
  <div id="red">Red ^^^^ this space is the issue</div>
  <div id="yellow">Yellow</div>
</div>

Answer 5

Я бы использовал встроенную сетку w3c css, которая сейчас поддерживается большинством навигаторов.Сетка Css позволяет устанавливать горизонтальное и вертикальное выравнивание.

"Как и таблицы, компоновка сетки позволяет автору выравнивать элементы по столбцам и строкам. Однако с сеткой CSS возможно или проще гораздо больше компоновок, чем с таблицами. Например, дочерние элементы контейнера сеткимогут позиционировать себя так, чтобы они фактически перекрывали друг друга и накладывали слои, подобно позиционированным элементам CSS. "

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout Вы найдете много видео на сетке CSS