Html 使用Flexbox创建布局

嘿，我是Flexbox的新手，我正在尽我所能把它做到最好。然而，我面临着一些身高和订单的问题，也许这里的一些人可以帮助我

注意：请不要建议使用网格/表格

这就是我现在所拥有的：

这就是我想要得到的：

html:

<div class="movie-container">

<div class="upper-container">

  <div class="image">Image</div>
  <div class="title">Title</div>
  <div class="more">More</div>

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

  <div class="runtime">Runtime</div>
  <div class="description">Description</div>
  <div class="director">Director</div>

</div>
</div>

.movie-container{
    display:flex;
    flex-flow: column wrap;
}

.upper-container {
    display: flex;
    width:80%;
    margin:0 auto;
    flex-flow: raw wrap;

}

.upper-container div {
    border: 1px solid black;
    padding: 10px;
}
.lower-container {
    display: flex;
    width:80%;
    margin:0 auto;
    flex-flow: column wrap;
}

.lower-container div {
    border: 1px solid black;
    padding: 10px;   
}
.image {
    flex: 1;
}

.title {
    flex: 3;
}

.more {
    flex: 0.1;
}
.runtime{ 
}
.description{

}
.director{
}

---

也许在flexbox旁边还需要添加其他东西，我不确定，这就是为什么我在这里问的原因。任何解决方案都会有帮助

如果您稍微更改一下HTML结构，就可以相当轻松地完成这一任务：

<div class="movie-container">
    <div class="upper-container">
        <div class="image">Image</div>

        <div class="side-container">
            <div class="title">Title</div>
            <div class="more">More</div>
            <div class="runtime">Runtime</div>
            <div class="description">Description</div>
        </div>
    </div>

    <div class="lower-container">
        <div class="director">Director</div>
    </div>
</div>

形象
标题
更多
运行时
描述
经理

---

Flex不太擅长跨多行/列（如表或网格）进行拉伸，尽管您表示不希望使用这种解决方案，但在这种情况下，它通常是一个更好的选择。

我发现在逐行的基础上使用flexbox而不是使用包装（尽管您当然也可以这样做）

作为一个起点，我认为这个片段就是你想要的

div{
flex:1自动；
}
.盒子{
边框：1px纯黑；
}
.flex{
显示器：flex；
}
.形象{
宽度：120px；
flex:0自动；
}
.更多{
flex:0自动；
}

形象
标题
更多
运行时
经理
描述
其他东西…

希望这有帮助

。上部容器{
显示器：flex；
高度：200px；
}
.左上角{
背景：ddd；
弹性：1；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.右上角{
弹性：3；
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
.title更多、.runtime、.director{
弹性：1；
边框：1px实心#222；
显示器：flex；
对齐项目：居中；
}
.下货柜{
边框：1px实心#222；
填充：10px；
}
.标题更多{
证明内容：之间的空间；
}
.更多按钮{
高度：30px；
宽度：100px；
边框：1px实心#333；
右边距：5px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

形象
标题
更多
运行时
经理
描述

关键是添加一些div并删除一些其他div：

.movie容器*{padding:.5em；}
.上货柜{
显示器：flex；
填充：0；
}
.形象{
边框：1px实心；
弹性：125%；
}
.tmrd{flex:1 75%；padding:0}
.标题更多{
显示器：flex；
填充：0；
}
.title{flex:1 75%；边框：1px实心；}
.more{flex:125%；border:1px solid；}
.runtime、.description、.director{border:1px solid；}

形象
标题
更多
运行时
描述
经理