have two rows on flex. How can I make one relatively bigger than the other?

Question

If I have two elements (I mean columns) inside a flex row, I can make one relatively bigger than the other using the "flex" attribute in CSS. Something like this

.flexContainer {
  display:flex;

   .column1 {
      flex: 2;
   }

   .column2 {
      flex : 5;
   }
}

this way, column2 will be bigger than column 1 in that row.

I was trying to do the same, but instead of columns, with rows. Something like this:

.flexContainer {
 display:flex;
 flex-direction:column;

   .row1 {
     flex:2;
    }

    .row2 {
       flex:5;
     }
}

but the rows have the same height. How can I make row2 be relatively bigger than row1? (relative to screen height)

it works the same for rows but you need to give a height to the container — Temani Afif, Sep 15 '19 at 19:20
@TemaniAfif can you show me the code that I would need to add? — chris56tv, Sep 15 '19 at 19:25
@TemaniAfif do you know how I can give a height equal to the screen height? — chris56tv, Sep 15 '19 at 19:34

score 0 · Answer 1 · answered Sep 15 '19 at 18:21

Don't know if flex has anything built in for this because it totally depends on the content you will provide. So:

You could give extra padding to .row2 to give the illusion of different height.
You could instead use display: grid and create how ever many rows you want and for any given row, use grid-row to let it consume two rows worth of space instead of one.

For example, with this you are telling the row with class row2 to consume both row 2 and 3 worth of space, giving it the difference in height you are looking for.

.row2 {
  grid-row: 2/span 3;
}

More info here.

have two rows on flex. How can I make one relatively bigger than the other?

1 Answers1