Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jason Ladieu
Jason Ladieu
10,635 Points

Flexbox trouble!

Hi, I'm trying to get the flexbox elements to align like this: https://i.stack.imgur.com/1od7u.png

In my case: I want the .colors-flex-container to be the column with .featured-img-flex and .featured-work-flex as the rows next to it. I can't seem to figure this out. Can someone help!!

There are obvious unfinished parts of this code so please disregard other issues - I just have not gotten to them yet.

https://codepen.io/JasonLadieu/pen/YOWPvP

2 Answers

Balazs Peak
Balazs Peak
46,160 Points
Balazs Peak
Balazs Peak
46,160 Points

I think you should go through both the flexbox and the css grid courses here on Treehouse. The combination of those two will give you all the power you need. The general layout of a website would incline more towards the territory of the css grid technology, where as the layout and responsive behavior of certain components are better to be addressed with flexbox.

Note: there are also good practice sessions in this topic here on Treehouse, to solidify your skills after you've gained the core knowledge in the courses.

Jason Ladieu
Jason Ladieu
10,635 Points

Good, that solves nothing.

Sam Gord
Sam Gord
14,084 Points
Sam Gord
Sam Gord
14,084 Points

its easy , whenever i face a grid like this i turn it into WORDs for myself to figure out what exactly i wanna do to make it happen. in this case , i see a parent container , which has 2 child elements, one on the right and the other on the left , the one on the right is also a parent of 2 other child elements which one of them is above the other . so . the html might looks like this 

<div class="big-parent"> 
   <div class="left">
   </div>
   <div class="right">
          <div class="right__top-green"></div>
          <div class="right__bot-blue"></div>
  </div>
</div>

and the css is this --> 

.big-parent{
  margin: 50px auto;
  width: 500px;
  height: 150px;
  display:flex;
}

.right{
  width:50%; 
  background:blue;
  display:flex;
  flex-direction: column;
}
.right__top-green{
  background: #31cc68; 
  width:100%;
  height:50%
}
.right__bot-blue{
  background: #1980cc;
  width:100%;
  height:50%
}
.left{
  width:50%;
  background: #cc0a2f;
}

here is also a link to a pen i made for you to play around with it if you want -->

https://codepen.io/simonestic/pen/EegEzm

happy coding ;)