CODEWITHSUNDEEP
htmlcssangularsassflexbox
rio
rio

Reputation: 807

Creating a layout with Flexbox

hey I'm new in Flexbox and I'm trying to get it as best as I can. However i faces a problem with some heights and orders, maybe some here could help out.

Note: Don't suggest using Grid/tables please.

this is what I have right now: current flexbox

this is what I want to get: the way I want it to look like

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{
}

Maybe other stuff need to be added beside flexbox I'm not sure, that's why I ask here. Any solution will be helpful!

Upvotes: 2

Views: 72

Answers (4)

enxaneta
enxaneta

Reputation: 33064

The key is to add some divs and remove some others:

.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>

Upvotes: 0

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

Hope this helps.

.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>

Upvotes: 0

Mike B.
Mike B.

Reputation: 1502

I find it easiest to work with flexbox on a row-by-row basis instead of using wrapping (although you can certainly do that too).

As a starting point, I think this snippet is what you're going for?

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>

Upvotes: 1

Andy Cormack
Andy Cormack

Reputation: 150

If you change your HTML structure slightly you can accomplish this fairly easily: 

<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 isn't very good at stretching across multiple rows / columns like tables or Grid is, while you state you don't want that solution it is typically a better option in cases like this.

Upvotes: 1

Related Questions