相关疑难解决方法(0)

如何在flex列包装布局中启动新列

我希望我的数据按列排列(从上到下,从左到右),数据中的每个标题都应该开始一个新列.有三个限制:

  • 必须使用flex(我需要使用特定于flex的功能)
  • 无法对数据进行分组(例如,将所有数据项包装在一个div中)
  • 无法设置固定高度

我的问题是如何在换行布局中强制删除列flex-flow: column

.grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.grid .head {
  width: 25%;
  background: orange;
  border-bottom: thin dotted;
}
.grid .data {
  width: 25%;
  background: yellow;
  border-bottom: thin dotted;
}
/* my attempt to solve this */
.grid {
  height: 76px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="grid">
  <div class="head">Column 1 (3 items)</div>
  <div class="data">item 1-1</div>
  <div class="data">item 1-2</div>
  <div class="data">item 1-3</div>
  <div class="head">Column 2 (4 items)</div>
  <div class="data">item 2-1</div>
  <div class="data">item 2-2</div> …
Run Code Online (Sandbox Code Playgroud)

css css3 flexbox

28
推荐指数
2
解决办法
2万
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1