Flexbox wrap, choose what child drops to next line

user_9456343 0
Viewed 393

It's possible to choose what child of flexbox should drop to the next line, instead of always dropping the last one? Example: Full-Size, no breaking: Full size, no breaking

Default behavior, breaking the last one. enter image description here

Desired behavior, breaking the div from the middle to the other line: enter image description here

Is this possible using flexbox?

flexbox css html
2 Answers

column can approximate this in case you need equal width elements

.box {
  column-width:max(30vw,150px);
}

.box > div {
  padding:10px;
  width:100%;
  display:inline-block;
  border:1px solid;
  margin-bottom:5px;
  box-sizing:border-box;
}

/* I need those extra elements to have correct layout */
.box > i {
  display:block;
}
<div class="box">
  <div>A</div><i></i>
  <div>B</div><i></i>
  <div>C</div>
</div>

user_86203330

Edited: You can use the order: n; property to order flexed items and flex shorthand property to make b element full width with flex: 0 0 100% and then change the order to order: 2

.flexbox {
  display: flex;
  flex-wrap: wrap;
}

.a, .b, .c {
  flex: 1;
}

@media(max-width: 768px) {
  .b {
    flex: 0 0 100%;
    order: 2;
  }
}
<div class="flexbox">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

user_85407590
Related