使用flex-box将列拆分为2个不相等的行

Question

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

我想要的布局看起来像

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

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

.container{
    display: grid;
    width: 100%;
    height: 45vw;
    margin: auto;
    gap: 25px;
    border: 2px solid red;

    grid-template-columns: repeat(2,fr);
    grid-template-rows: repeat(2,fr);
    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%;
  }

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

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="/style/style.css">
</head>

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

</html>

Answer 1

这是您的代码：

.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, fr);
  grid-template-rows: repeat(4, fr);
  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>

使用flex-box将列拆分为2个不相等的行

问题描述投票：0回答：1

1个回答

最新问题

使用flex-box将列拆分为2个不相等的行

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1