我需要使用 flex 实现以下结构答案

【问题标题】：I need to achieve following structure using flex我需要使用 flex 实现以下结构
【发布时间】：2018-05-04 16:48:31
【问题描述】：

&lt;ul&gt; &lt;li&gt;list1&lt;/li&gt; &lt;li&gt;list2&lt;/li&gt; &lt;li&gt;list3&lt;/li&gt; &lt;/ul&gt;

Desired layout

列表已使用 flex 排列。但我得到的结构如图 2 所示

【问题讨论】：

标签： css flexbox

【解决方案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>

【讨论】：

【解决方案2】：

Flexbox 不支持这种类型的网格。但是你可以使用浮动或网格布局来做到这一点：

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

【讨论】：

Flexbox doesn't support this type of grid --> 这是错误的，最好删除它，因为我们可以使用 flex 来做到这一点
Flexbox 用于一维布局，而 Grid 用于二维布局。如果你想获得那个布局，你必须使用嵌套的 flexgrid。
你说的不对，我们可以用 flexbox 做到这一点：jsfiddle.net/6djrwkud .. 你提供了一个网格解决方案，所以你可以简单地保留它，不要说“我们不能用 flex 做”
我并不是说你不能使用 flexbox。但你的解决方案很好。
你说的很清楚Flexbox doesn't support this type of grid，当有人读到这个的时候，他会认为flexbox没有办法做到这一点。