弹性列的行高不相等 [英] Unequal row heights in a flex column

问题描述

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

I'm trying to make a layout like the picture below but I don't know how to specify the column to make it be like a part of it 3/4 the column and the other part is 1/4, I'm trying to use flexbox

我想要的布局如下：

我不知道该如何表达我的意思：D仍然是flexbox的新手。

I don't know how to make what I'm saying up there :D as am still new to flexbox.

，但低于我尝试创建此东西的尝试，但我无法使第一列包含两个不相等的行。

but down below my attempt to create this thing, but i couldn't make the first column consists of two unequal rows.

.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>

推荐答案

这是您的代码：

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

如果您想将两个网格区域分别分为3/4和1/4，则为什么要使用两行？改为使用四行。

If you want two grid areas split 3/4 and 1/4, then why use two rows? Use four rows instead.

.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>

以下是flexbox解决方案：

Here's the flexbox solution:

.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>

这篇关于弹性列的行高不相等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！