Responsive image on responsive background image

If container is display:flex then all those direct children (header,left-column,main,right-column,footer) are flex items and will behave as flex items as directed by the rules you have set for the flex container.

It all depends what you are using flex for but there is a bug/behaviour in flexbox where percentage padding and margins are treated as zero.

So the question still comes down to what have you got planned for that layout and why the need for flex? You may be able to use another method instead or indeed just use flex for certain items.

1 Like