Плавающий элемент в макете на основе Flex

Question

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

Есть ли способ заставить оранжевый прямоугольник появиться справа от красного прямоугольника, как в примере ниже? Мне нужно использовать flexbox без установки максимальной высоты, так как это определяется содержимым.

.wrapper {
display: flex;
max-width: 400px;
height: 100%;
width: 400px;
flex-direction: row;
flex-wrap: wrap;
background: lightgrey;
}

.bigbox {
  width: 200px;
  background: red;
}

.smallbox1 {
  width: 200px;
  height: 200px;
  background: green;
}

.smallbox2 {
width: 100px;
  height: 200px;
  background: orange;  
}

<div class="wrapper">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
<div class="smallbox1"></div>
<div class="smallbox2"></div>
</div>

Answer 1

Надеюсь, это то, что вы ищете. Сгруппируйте небольшую коробку вместе и установите ее flex-diretion: column

.wrapper {
display: flex;
max-width: 300px;
height: 100%;
width: 400px;
flex-direction: row;
flex-wrap: wrap;
background: lightgrey;
}
.wrapper-2 {
display: flex;
max-width: 300px;
max-height: 400px;
width: 400px;
flex-direction: column;
flex-wrap: wrap;
background: lightgrey;
}
.column{
  display: flex;
  flex-direction: column;
}
.bigbox {
  width: 200px;
  background: red;
  /*height: 100%; If you don't want the big box to take full height with flex wrap*/
}

.smallbox1,.smallbox2 {
  width: 100px;
  height: 200px;
}

.smallbox1 {
  background: green;
}

.smallbox2 {
  background: orange;  
}

<div class="wrapper">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
  <div class="column">
    <div class="smallbox1"></div>
    <div class="smallbox2"></div>
  </div>
</div>
<hr/>
<div class="wrapper-2">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
 <div class="smallbox1"></div>
 <div class="smallbox2"></div>
</div>

Answer 2

Я бы предложил использовать css-grid поверх flexbox, поскольку речь идет о 2-мерном макете (flexbox отлично подходит для 1-мерных макетов).

вам нужно всего лишь изменить / добавить 3 строки в ваш код:

оболочке нужно display:grid, а бигбоксу нужно grid-column: 1 и grid-row: 1 / 3

Я добавил в свой фрагмент дополнительный текст, чтобы показать, что это работает в зависимости от содержимого.

отметьте ниже фрагмент

.wrapper {
  max-width: 400px;
  height: 100%;
  width: 400px;
  background: lightgrey;
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 100%;
  grid-auto-flow: column;
}

.bigbox {
  width: 200px;
  background: red;
  grid-column: 1;
  grid-row: 1 / 3;
}

.smallbox1 {
  height: 200px;
  background: green;
}

.smallbox2 {
  background: orange;
}

<div class="wrapper">
  <div class="bigbox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor
    sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.magna. Nullam sed massa luctus.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
  <div class="smallbox1"></div>
  <div class="smallbox2"></div>
</div>

Я нашел этот css-grid шпаргалку очень полезным,

официальные документы здесь,

поддержка браузера здесь

Answer 3

Я сделал с order

.wrapper {
display: flex;
max-width: 300px;
height: 100%;
width: 300px;
flex-direction: row;
flex-wrap: wrap;
background: lightgrey;
}

.bigbox {
  width: 200px;
  background: red;
  order:1;
}

.smallbox1,.smallbox2 {
  width: 100px;
  height: 200px;
}

.smallbox1 {
  background: green;
  order:3;
  
}

.smallbox2 {
  background: orange;  
  order:2;
}

<div class="wrapper">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
<div class="smallbox1"></div>
<div class="smallbox2"></div>
</div>