flex 列中的行高不相等答案

【问题标题】：Unequal row heights in a flex columnflex 列中的行高不相等
【发布时间】：2020-10-02 11:56:45
【问题描述】：

我正在尝试制作如下图所示的布局，但我不知道如何指定列以使其成为列的 3/4 的一部分，而另一部分是 1/4，我我正在尝试使用 flexbox

这是我想要的布局：

我不知道如何使我在上面说的话 :D 因为我还是 flexbox 的新手。

但低于我创建这个东西的尝试，但我无法使第一列由两个不相等的行组成。

.container {
  display: grid;
  width: 100%;
  height: 45vw;
  margin: auto;
  gap: 25px;
  border: 2px solid red;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas:
    "cmd  grph grph grph  " 
    "write grph grph grph";
}

.box {
  display: flex;
  /*flex-direction: row;*/
  align-items: center;
  justify-content: center;
  border: 5px solid black;
}

.dot {
  height: 50px;
  width: 50px;
  background-color: blueviolet;
  border-radius: 50%;
}

.command {
  grid-area: cmd;
}

#grph {
  grid-area: grph;
}

#write {
  grid-area: write;
}

<div class="container">
  <div class="command box"></div>
  <div id="grph" class="box"></div>
  <div id="write" class="box"></div>
</div>

【问题讨论】：

codepen.io/Baron14/pen/YzwqBVM 我在这里创建了这支笔，演示了如何使用 flexbox 来满足您当前的需求。我希望它有所帮助。
谢谢，帮了大忙
请注意代码中的几个语法错误。 fr 应该是 1fr （或任何你想要的值）。 #cmd 网格区域应用于容器，所以它不起作用。也没有.dot 元素。
@MichaelBenjamin 谢谢，更新了代码。

标签： html css flexbox css-grid

【解决方案1】：

首先给类名不同的 class="box1" 之后改变它的属性

box1{
height:40vh
}

box2{
height: 20vh}

【讨论】：

【解决方案2】：

这是你的代码：

.container {
   display: grid;
   grid-template-rows: repeat(2,fr);
}

如果您希望将两个网格区域分成 3/4 和 1/4，那么为什么要使用两行？请改用四行。

网格

.container {
  display: grid;
  height: 45vw;
  gap: 25px;
  border: 2px solid red;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
    "cmd  grph grph grph  "
    "cmd  grph grph grph  "
    "cmd  grph grph grph  "    
    "write grph grph grph";
}

.command  { grid-area: cmd; }
#grph     { grid-area: grph;  }
#write    { grid-area: write; }

.box      { border: 5px solid black; }

<div class="container" id="cmd">
  <div class="command box"></div>
  <div id="grph" class="box"></div>
  <div id="write" class="box"></div>
</div>

弹性

这是弹性盒解决方案：

.container {
  display: flex;
  flex-flow: column wrap;
  height: 45vw;
  border: 2px solid red;
}

.command {
  flex: 3;
  margin-bottom: 25px;
}

#grph {
  flex-basis: 100%;
  order: 1;
  margin-left: 25px;
}

#write {
  flex: 1;
}

.box {
  border: 5px solid black;
}

<div class="container" id="cmd">
  <div class="command box"></div>
  <div id="grph" class="box"></div>
  <div id="write" class="box"></div>
</div>

【讨论】：

flex方案中如何控制列的大小？
@AdhamNawito 一个 compact 版本的 CSS 网格解决方案，如果你有兴趣的话：jsfiddle.net/bnmsqLt9/1 .. 不容易处理，但如果你愿意，它可以提供优化的想法拥有更复杂的模板。