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 Rikki Collier
Rikki Collier
2,708 Points

Flexbox - Help!

Hi Treehouse,

I've done the flexbox course a couple of times now and I'm almost at the point of giving up out of frustration.

I'm trying to create a flexbox layout that looks like this:

ROW ONE: div div div (3 divs on one row that take up equal space) ------- ROW TWO: DIV (div that takes up 100% width) ----------- ROW THREE: div div (two divs that take up 50% space each) -------------

Is this even possible? I keep playing with the widths etc and its just not achieving the look I'm going for at all. Really don't know what to do. Any help would be appreciated.

Thanks,

Rik

Sorry for the weird formatting. The forum fills the space between the three rows so they don't appear on three separate lines as I had originally typed them

3 Answers

Tomasz Sporys
Tomasz Sporys
11,258 Points

HTML

<div class="row1"> <div class="blue"></div> <div class="red"></div> <div class="green"></div> </div>

<div class="row2"> <div class="yellow"></div> </div>

<div class="row3"> <div class="orange"></div> <div class="black"></div> </div>

CSS

.blue{ background-color: blue; flex-grow: 3; }

.red{ background-color: red; height: 30vh; flex-grow: 3; }

.green{ background-color: green; height: 30vh; flex-grow: 3; }

.row1{ display: flex; height: 30vh; background-color: darkgray; }

.yellow{ background-color: yellow; flex-grow: 1; height: 30vh; }

.row2{ display: flex; width: 100%; height: 30vh; } .orange{ background-color: orange; flex-grow: 2; }

.black{ background-color: black; flex-grow: 2; }

.row3{ display: flex; width: 100%; height: 30vh; }

You have to adjust the height the way you want. Hope this helps:) Basically, flex-grow: distributes the space. LINK TO THE EXAMPLE http://codepen.io/anon/pen/YGQdYJ

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

Hi,

You could try do something like this:

<div class="container">
  <div class="row row-1">
    <!-- ROW-1 INSIDE HERE -->
  </div>
  <div class="row row-2">
    <!-- ROW-2 INSIDE HERE -->
  </div>
  <div class="row row-3">
    <!-- ROW-3 INSIDE HERE -->
  </div>
</div>

inside row-1 you just create 3xdivs and divide the width by 3, inside row-2 you just create a div and give it 100% of the width, inside row-3 you just create 2xdivs and divide the width by 2

I hope this can help you :-)

Rikki Collier
Rikki Collier
2,708 Points
Rikki Collier
Rikki Collier
2,708 Points

Thanks guys, this definitely helped!