Flex：容器的高度与旁边的两个容器相同（vue/tailwind）

Posted 2023-03-07

【中文标题】Flex：容器的高度与旁边的两个容器相同（vue/tailwind）

【英文标题】：Flex: Same hight of container as two containers beside (vue/tailwind)

【发布时间】：2021-06-21 01:20:45

【问题描述】：

我有三个宽度相同的弹性容器。在第三个容器内，我在 flex-col 中有一些元素，在第三个容器的底部，我还有两个容器（C1，C2），在这个容器旁边还有一个 C3，我希望它具有与容器 C1 和 C2 相同的高度需要。但我无法完成这项工作。使用 flex-1 我只归档 C1/C2 和 C3 彼此相邻的宽度相同。

这是我的代码（仅适用于正确的大容器）：

 <div class="flex-1">
      <div class="ml-4 flex flex-1 flex-col">
        <FirstContainer />
        <SecondContainer />
        <div class="flex flex-row flex-1">
          <div class="flex flex-col flex-1">
            <C1 />
            <C2 />
          </div>
          <div class="flex-1 ml-4 h-full">
            <C3 />
          </div>
        </div>
      </div>
    </div>

它应该是这样的：

【参考方案1】：

在父元素上使用 css grid：

.parent 
  display: grid;
  grid-template-columns: repeat(3, 1fr);


.container 
  border: 1px solid;


.child 
  border: 1px solid red;
  margin: 5px;
  min-height: 200px;
  width: calc(100% - 10px);

<div class="parent">
  <div class="container">

  </div>
  <div class="container">

  </div>
  <div class="container">
    <div class="child">

    </div>
    <div class="child">

    </div>
    <div class="child">

    </div>
    <div class="child">

    </div>
    <div class="child">

    </div>
  </div>
</div>

默认情况下，css grid 属性 grid-auto-rows 的值为 auto，这使得所有列的高度相同。

使用css的解决方案flex：

.parent 
  display: flex;


.container 
  flex: 1 0 calc(100% / 3);
  border: 1px solid;


.child 
  border: 1px solid red;
  margin: 5px;
  min-height: 200px;
  width: calc(100% - 10px);

<div class="parent">
  <div class="container">

  </div>
  <div class="container">

  </div>
  <div class="container">
    <div class="child">

    </div>
    <div class="child">

    </div>
    <div class="child">

    </div>
    <div class="child">

    </div>
    <div class="child">

    </div>
  </div>
</div>

【讨论】：

感谢您的帮助。有没有机会通过 flex 实现这一目标？因为我目前不知道网格:(

编辑了我的答案以包含flex 解决方案。

【参考方案2】：

可以使用flex并将子元素设置为flex: 1来填充剩余空间：

body 
    margin: 0;


.container 
   display: flex;
   height: 100vh;



.col 
   background-color: lightgreen;
   flex: 1 1 0px;



.lightpink 
   background-color: lightpink;
   border: 1px solid;
   flex:1;



.container > div 
   width: 50%;
   display:flex;
   flex-direction:column;


.col .container 
   display: flex;
   height: 100%;

<div class="container">
    <div class="col">
      one
    </div>
    <div class="col">
      two
    </div>
    <div class="col">
      <div>1</div>
      <div>2</div>
      <div class="container">
          <div >
            <div class="lightpink">col 1</div>
            <div class="lightpink">col 2</div>
          </div>
          <div>
            <div class="lightpink">col 3</div>
          </div>
      </div>
    </div>
  </div>