Question

fig 2

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

Desired layout

已经使用flex安排了

列表。但我得到的结构如图2所示

Answer 1

您可以依赖列方向并更新项目顺序，您可以使用flexbox轻松完成此操作：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 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

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

2 个答案: