Создание макета с помощью 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 IЯ не уверен, поэтому я спрашиваю здесь.Любое решение будет полезно!

Answer 1

Ключ состоит в том, чтобы добавить некоторые 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>

Answer 2

Мне проще всего работать с flexbox построчно, а не использовать перенос (хотя вы, конечно, тоже можете это делать).

В качестве отправной точки, я думаю, что этот фрагментты идешь?

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

Если вы немного измените свою 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, хотя вы заявляете, что не хотите использовать это решение, обычно это лучший вариант в подобных случаях.