Flexbox Layout Pattern: 3 Squares Ordered (1 Large Left, 2 Small Right Stacked)

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

• BOX A

• Solution 1:

  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>

  
  

Share