如何使 div 100% 高度与其他两个 div 对齐作为 flexbox 中的列？ [复制]答案

【问题标题】：How can I make a div 100% height align with two other divs as column in flexbox? [duplicate]如何使 div 100% 高度与其他两个 div 对齐作为 flexbox 中的列？ [复制]
【发布时间】：2021-07-10 03:17:46
【问题描述】：

如何让一个 div 100% 高度与另外两个 div 对齐作为 flexbox 中的列？

【问题讨论】：

标签： html css

【解决方案1】：

您也应该在此处发布您的代码并告诉您的问题，因为有多种方法可以这样做。这样做的一种方法是使用带有 flex-direction=row 和 2 个 flex-items 的主 flexbox：第一个 'First-div' 作为 th2 第二个带有 flex-direction=column 的 flexbox。这是一个代码。希望对你有帮助

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    width: 400px;
    height: 250px;
}
.flex-container2 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 250px;
}
.flex-item-cont{
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 0px;
}
.flex-item1 {
    background-color: red;
    width: 100px;
    height: 200px;
    margin: 0px;
}
.flex-item2 {
    background-color: blue;
    width: 100px;
    height: 100px;
    margin: 0px;
}
.flex-item3 {
    background-color: green;
    width: 100px;
    height: 100px;
    margin: 0px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item1">Third Div</div>
  <div class="flex-item-cont">
    <div class="flex-container2">
      <div class="flex-item2">First Div</div>
      <div class="flex-item3">Second Div</div>
    </div>
  </div>
</div>

</body>
</html>

希望，它会有所帮助。

【讨论】：

我需要像我提到的那样使用 flexbox。
刚刚看到。现在编辑我的答案。请现在看看。您可以运行代码 sn-p 并检查它是否正是您想要的。希望对你有帮助
是否可以在不将这 3 个 div 与另一个 div 包装在一起的情况下做到这一点？因为我想以较低的屏幕分辨率对这些 div 做其他事情，并用不同的 div 包装它们会产生问题。
可以使用 position: absolute; & 然后调整他们的位置然后

【解决方案2】：

按照使用 flex 完成的代码，它会自动调整子框的大小

<style>
    .box-main {
        display: flex;
        justify-contents: space-between;
    }
    
    .box1 {
        height: 100vh;
        background-color: red;
        width: 40%;
    }
    
    .box2 {
        width: 60%;
        height: 100vh;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
    }
    
    .subbox1 {
        background-color: blue;
        flex: 1;
    }
    
    .subbox2 {
        background-color: green;
        flex: 1;
    }
</style>
    <div class="box-main">
        <div class="box1">
            Third Div
        </div>
        <div class="box2">
            <div class="subbox1">
                First Div
            </div>
            <div class="subbox2">
                Second Div
            </div>
        </div>
    </div>

【讨论】：

是否可以在不将这 3 个 div 与另一个 div 包装在一起的情况下做到这一点？因为我想以较低的屏幕分辨率对这些 div 做其他事情，并用不同的 div 包装它们会产生问题。