0

Good day, is it possible with flexbox to force a break after the second element and then just put it underneath? enter image description here

.flex {
  display:flex;
  flex-direction: row;
  width: 100%;
}

.item {
  background-color: red;
  width: 33.333%;
  min-height: 400px;
  margin: 10px;
}
<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Konzule
  • 131
  • 1
  • 1
  • 6
  • 1
    No this is not possible unless using column direction and a known height. You want CSS-Grid – Paulie_D Jul 06 '22 at 12:52
  • https://stackoverflow.com/questions/33947885/left-column-and-stacked-right-column-using-flexbox-css – Paulie_D Jul 06 '22 at 12:54
  • With this html is not possible... in this case better use grid – Sfili_81 Jul 06 '22 at 12:56
  • That is THE use-case to opt for CSS `grid` as it supports multi-dimensional columns and rows while flex-box just supports either rows or columns. https://cssgrid-generator.netlify.app/ may be an introductory tool that aids you if you are not familiar with grid. – WebDevPassion Jul 06 '22 at 12:59

1 Answers1

-1

It is better to use the grid, but you can use the column direction and give the height of columns 1 and 4 to 100% and 2 and 3 to the extent that the total reaches 100%.

Ismailkhosrowshiri
  • 45
  • 11