Maximilian Ruppert Maximilian Ruppert - 3 months ago 17
CSS Question

Flexbox Layout Pattern: 3 Squares ordered (1 large left, 2 small right stacked)

I'm trying to achive the following ordered layout with flexbox:

ordered flexbox layout

HTML:

<ul class="box-wrapper">
<li class="box boxa">BOX A</li>
<li class="box boxb">BOX B</li>
<li class="box boxc">BOX C</li>
</ul>


CSS:

.box-wrapper{
display:flex;
}
.boxa{
order: 1;
// should be: width: 50%;
// should be: height: 100%;
}
.boxb{
order: 3;
// should be: width: 50%;
// should be: height: 100%;
}
.boxc{
order: 2;
// should be: width: 50%;
// should be: height: 100%;
}


Floating box-b and box-c don't seem to work, so I hope anyone can help me out on this one.
Changing the HTML layout is not an option on this one.

Answer

With flexbox you would need a known (or calculable) height to achieve this without changing the HTML.

* {
  margin: 0;
  padding: 0;
}
.box-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
  list-style-type: none;
}
.boxa {
  background: red;
  flex: 0 0 100%;
  width: 50%;
}
.boxb {
  background: orange;
  order: 2
}
.boxc {
  background: lightgreen;
}
.boxb,
.boxc {
  flex: 0 0 50%;
  width: 50%;
}
<ul class="box-wrapper">
  <li class="box boxa">BOX A</li>
  <li class="box boxb">BOX B</li>
  <li class="box boxc">BOX C</li>
</ul>

Comments