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 CSS Flexbox Layout Building a Layout with Flexbox Aligning Items to the Bottom of a Column

Posted by XIN FANG ZHONG
XIN FANG ZHONG
10,149 Points

Aligning Items to the Bottom of a Column in Two Column

In this course, I try to make the page with two column in one line, primary and secondary in 50% width, and the third column wrap to another line in 769px break point. Here is my css code:

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

    .main-header,
    .main-nav,
    .row,
  .col {
        display: flex;
    }

    .main-header {
        flex-direction: column;
        align-items: center;
    }

  .col {
    flex-direction: column;
  }

  .primary,
  .secondary {
    flex: 1 0 50%;
  }

  .button {
    align-self:flex-start;
    margin: auto auto 0;
  }

}

@media (min-width: 1025px) {

    .main-header {
        flex-direction: row;
        justify-content: space-between;
    }

  .col {
    flex: 1;
  }
}

By using this code, I made the primary col and secondary col in two col evenly and the tertiary col out of screen (need to scroll vertically).

I have tried to add .row { flex-wrap: wrap;} (with this code, it just behave like flex-direction in vertical) or .col { flex-wrap: wrap;} (nothing change) , but the tertiary col did not wrap to an other line.

So, how can I achieve my need?

Gari Merrifield
Gari Merrifield
9,597 Points
Gari Merrifield
Gari Merrifield
9,597 Points

if you inspect the .col. elements, they have margins and padding ( see base.css ), which I believe is messing with the 50% calculations.

It is the .row { flex-wrap: wrap; } that will be needed to head you in the correct direction.

Not a full answer, just some pointers to try to help you solve the issue.