仅包裹行的一部分（在完整高度列旁边）

Question

我现在有一个这样的横幅：

但我基本上希望它看起来像这样：

我有一张高（呃）地图，一个日期范围的方框，一个拉链方框，一个我想要的单行关键字框。由于地图很高，我希望下一个框，操作（不高），在日期范围，zip和关键字框下方正确，但也在地图右侧（不在地图下面！）

我一直在努力尝试无法破解这个...似乎无法在网上找到类似的例子。你能帮帮我吗？

我的工作代码：http://jsfiddle.net/susanc/227f4660/14/

* {
  box-sizing: border-box;
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>#daterange {
  background-color: yellow;
  flex: 1 0 25%;
  text-align: center;
  padding: 10px;
}

.flex>#zip {
  background-color: lightgreen;
  flex: 1 0 25%;
  text-align: center;
  padding: 10px;
}

.flex>#keywords {
  background-color: lightblue;
  flex: 1 0 25%;
  text-align: center;
  padding: 10px;
  flex-grow: 1;
}

.flex>#operations {
  background-color: red;
  flex: 0 1 75%;
  text-align: center;
  padding: 10px;
}

.flex>#map {
  flex: 1 0 25%;
  background-color: pink;
  text-align: center;
  padding: 10px;
}

<div class="flex">
  <div id="map">map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map
    map map map map map map map map map map map map map map map map map map map map map </div>
  <div id="daterange">daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange </div>
  <div id="zip">zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip </div>
  <div id="keywords">keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords </div>
  <div id="operations">operations operations operations operations operations operations operations operations operations operations operations operations</div>
</div>

Answer 1

你想要的布局并不适用于flex，因为你正在尝试组装一个二维网格，而flexbox是一维布局系统。

这里详细解释了这个问题：

• Is it possible for flex items to align tightly to the items above them?

如果你真的想要一个灵活的解决方案，上面的帖子提供了选项，这篇文章也可能有用：

• Calculator keypad layout with flexbox

然而，构建布局的简单，简单和有效的方法使用CSS Grid：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
}

#map { 
  grid-row: 1 / 3; 
}

#operations {
  grid-column: 2 / 5;
}

#map        { background-color: pink; }
#daterange  { background-color: yellow; }
#zip        { background-color: lightgreen; }
#keywords   { background-color: lightblue; }
#operations { background-color: red; }
.grid > div { text-align: center; padding: 10px; }
*           { box-sizing: border-box; }

<div class="grid">
  <div id="map">map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map map </div>
  <div id="daterange">daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange daterange </div>
  <div id="zip">zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip zip </div>
  <div id="keywords">keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords keywords </div>
  <div id="operations">operations operations operations operations operations operations operations operations operations operations operations operations</div>
</div>

jsFiddle demo

Answer 2

我认为你需要更多的结构来获得你想要的布局。从概念上讲，“地图”if (myVariable != null) { myVariable.call()}左侧的所有内容都是另一列。在该列中，有一行包含日期，zip和关键字if s ...

div

div