使用 Flexbox 创建布局

Question

嘿，我是 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>

css：

.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 旁边添加其他东西，这就是我在这里问的原因。任何解决方案都会有所帮助！

Answer 1

如果你稍微改变你的 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>

JSFiddle

Flex 不太擅长像表格或 Grid 那样跨多行/多列进行拉伸，虽然您声明您不想要该解决方案，但在这种情况下它通常是更好的选择。

Answer 2

我发现在逐行的基础上使用 flexbox 比使用包装更容易（尽管你当然也可以这样做）。

作为一个起点，我认为这个 sn-p 就是你想要的？

div {
  flex: 1 1 auto;
}

.box {
  border: 1px solid black;
}

.flex {
  display: flex;
}

.image {
  width: 120px;
  flex: 0 0 auto;
}

.more {
  flex: 0 0 auto;
}

<div class="flex upper">
  <div class="box flex image">Image</div>
  <div class="upper-detail">
    <div class="flex title-container">
      <div class="box title">Title</div>
      <div class="box more">More</div>
    </div>
    <div class="box runetime">Runtime</div>
    <div class="box director">Director</div>
  </div>
</div>
<div class="box description">Description</div>
<div class="box other">Other stuff...</div>

Answer 3

希望这会有所帮助。

.upper-container{
  display: flex;
  height: 200px;
}

.upper-left{
  background: #ddd;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upper-right{
flex: 3;
display: flex;
flex-direction: column;
height: 100%;
}

.title-more, .runtime, .director{
  flex: 1;
  border: 1px solid #222;
  display: flex;
  align-items: center;
}

.lower-container{
  border: 1px solid #222;
  padding: 10px;
}

.title-more{
  justify-content: space-between;
}

.more-button{
  height: 30px;
  width: 100px;
  border: 1px solid #333;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="movie-container">
  <div class="upper-container">
    <div class="upper-left">
      Image
    </div>
    <div class="upper-right">
       <div class="title-more">
          <div class="title-container">
            Title
          </div>
          <div class="more-button">
            More
          </div>
       </div>
       <div class="runtime">Runtime</div>
       <div class="director">Director</div>
    </div>
  </div>
  <div class="lower-container">
      Description
  </div>
</div>

Answer 4

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

.movie-container *{padding:.5em;}

.upper-container {
  display: flex;
  padding:0;
}

.image {
  border: 1px solid;
  flex: 1 1 25%;
}

.tmrd{flex: 1 1 75%;padding:0}

.title-more {
  display: flex;
  padding:0;
}

.title{flex: 1 1 75%;border: 1px solid;}
.more{flex: 1 1 25%;border: 1px solid;}

.runtime,.description,.director{border: 1px solid;}

<div class="movie-container">

  <div class="upper-container">

    <div class="image">Image</div>

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

  <div class="director">Director</div>

</div>