CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Three Column Layout with Flexbox

Igor Lamarain Montes
Igor Lamarain Montes
4,405 Points

Hi i am having problems with flex box.

I'm trying to put 1 flex container near other, I will going to use the first one as menu and the second one as gallery.

They are going to work

[ c [ gallery container ] o [ gallery container ] n [ gallery container ] t [ gallery container ] a [ gallery container ] i [ gallery container ] n [ gallery container ] e [ gallery container ] r] [ gallery container ]

Now i'm only getting https://ibb.co/nuoLRQ

Ben Flores
Ben Flores
17,074 Points

I'm a little confused by the last part of your question. BUT, based on your picture, it looks like you have two main containers each holding children inside.. and you want both of these containers side by side, horizontally?

If that's the case, I think what you have to do is have ONE more container wrapping the two main containers you currently have, and on that big container that basically takes over the whole page, make sure to add this CSS. Let's pretend you give your big container an id of "main"

#main{
  display: flex;
  flex-direction: row;
}

You might have to adjust the CSS for the immediate children, giving them a width attribute.

Feel free to reach out to me directly! In the meantime, here are a few great flexbox resources that really helped me get a hang of it!

This is a fun little game, 24 levels.. you can probably complete under an hour. http://flexboxfroggy.com/

A really useful cheat sheet for reference! https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Good luck!