0

Возможно ли с помощью flex-layout расположить в одной строке 3 элемента, два из которых расположены друг под другом?

* {
  box-sizing: border-box;
}

.container {
  width: 600px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.element {
  width: 200px;
  height: 100px;
  background-color: red;
  border: 3px solid white;
  flex-shrink: 0;
}

.big {
  width: 400px;
  height: 200px;
}
<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element big"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

2 ответа 2

0

Думаю нужно завернуть последние два блока в один div. А в другой div завернуть большой блок и завернутый блок. И получится.

* {
  box-sizing: border-box;
}

.container {
  width: 600px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.element {
  width: 200px;
  height: 100px;
  background-color: red;
  border: 3px solid white;
  flex-shrink: 0;
}

.big {
  width: 400px;
  height: 200px;
}

.second_line {
  display: flex;
}

.second_column {
  flex-direction: column;
}
<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="second_line">
    <div class="element big"></div>
    <div class="second_column">
      <div class="element"></div>
      <div class="element"></div>
    </div>
  </div>
</div>

0

Спасибо за ответ. Последнее лишнее, достаточно одного контейнера с flex-direction: column для последних двух блоков.

* {
  box-sizing: border-box;
}

.container {
  width: 600px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container-column {
  flex-direction: column;
}

.element {
  width: 200px;
  height: 100px;
  background-color: red;
  border: 3px solid white;
  flex-shrink: 0;
}

.big {
  width: 400px;
  height: 200px;
}
<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element big"></div>
  <div class="container-column">
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.