仅换行的一部分（全高列旁边）

Question

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

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

我有一张高（呃）地图，一个日期范围框，一个拉链框，一个关键字框，我想要在一行中。因为地图很高，我想要下一个框，操作（不高），右在日期范围、邮编和关键字框下方，但也向右地图的（不在地图下方！）

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

用我的作品编码：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

我认为您需要更多的内部结构来获得您想要的布局。从概念上讲，"map" div 左侧的所有内容都是另一列。在该列中，有一行包含日期、邮编和关键字 divs…

* {
  box-sizing: border-box;
}

#outercontainer {
  display: flex;
  flex-direction: row;
}

#leftcolumn {
  flex: 0 1 75%;
  display: flex;
  flex-direction: column;
}

#leftrow {
  display: flex;
  flex-direction: row;
}

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

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

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

#operations {
  background-color: red;
  text-align: center;
  padding: 10px;
}

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

<div id="outercontainer">
  <div id="map">map </div>

  <div id="leftcolumn">
    <div id="leftrow">
      <div id="daterange">daterange </div>
      <div id="zip">zip </div>
      <div id="keywords">keywords </div>
    </div>

    <div id="operations">operations </div>
  </div>
</div>

Answer 2

您想要的布局对于 flex 来说并不自然，因为您正在尝试 assemble 一个 two-dimensional 网格，而 flexbox 是一个 one-dimensional 布局系统。

这里详细解释问题：

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

如果您真的想要灵活的解决方案，上面的 post 提供了选项，这个 post 也可能有帮助：

但是，构建布局的简单、容易且高效的方法使用 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>

仅换行的一部分（全高列旁边）

Wrapping only part of the row (next to a full height column)

html

css

flexbox

css-grid

jsFiddle demo