Fullwidth and multiple columns using flexbox

Question

I\'m trying to create a flexbox row with fullwidth and multiple columns on the same container.

I\'ve tried flex-break: after; but am not su

Answer 1

You need to set flex-wrap: wrap on flex container, and then flex: 0 0 100% on full-width items and flex: 0 0 50% on half-width items. Also you should add box-sizing: border-box.

* {
  box-sizing: border-box;
}
.collage {
  display: flex;
  flex-wrap: wrap;
}
.collage-item {
  border: 1px solid black;
  flex: 0 0 50%;
  padding: 10px;
}
.fullwidth {
  flex: 0 0 100%;
}

  
  
a

  
  
b
  
c

  
  
d