Мне нужно добиться следующей структуры с помощью flex

Question

рис 2

<ul> <li>list1</li> <li>list2</li> <li>list3</li> </ul>

Желаемая раскладка

списки были организованы с использованием flex. Но я получаю структуру, как показано на рис 2

Answer 1

Вы можете положиться на направление столбца и обновить порядок элементов, и вы можете легко сделать это с помощью flexbox:

ul {
  list-style:none;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  height:200px;
  margin:0;
  padding:0;
}
ul >li {
  height:50%;
  border:1px solid;
  box-sizing:border-box;
}
ul >li:nth-child(2) {
  height:100%;
  order:2;
}

<ul>
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ul>

Answer 2

Flexbox не поддерживает этот тип сетки. Но вы можете сделать это, используя float или макет сетки:

HTML

<div class="wrapper">
  <ul>
     <li class="double">1</li>
     <li>2</li>
     <li>3</li>
  </ul>
</div>

CSS:

.wrapper {
  padding: 10px;
  border: 2px solid gray;
  height: 50vh;
}
ul { 
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.double {
  grid-row-end: span 2;
}
li {
  border:2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
}

https://codepen.io/anon/pen/jxLLrL