html - 仅换行的一部分(全高列旁边)

Question

我现在有一个像这样的横幅:

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

我有一个高大(呃) map ，一个日期范围框，一个 zipper 框，一个我想要在一行中的关键字框。因为 map 很高，所以我希望下一个框，即操作(不高)位于日期范围、 zip 和关键字框下方的右侧，但也位于 map 右侧(不在 map 下方!)

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

代码与我的工作: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 {
  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