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 Creating a Three Column Layout with Flexbox

Kyle Laresn
Kyle Laresn
6,506 Points
Posted by Kyle Laresn
Kyle Laresn
6,506 Points

Help with the 769px break point

I cannot get this column to break and go to a two column layout with one column below it. I followed what the video said exactly and it is not working. Tell me what I am missing @media (min-width: 769px) {

.main-header,
.main-nav,
    .row

{ display: flex; }

.main-header {
    flex-direction: column;
    align-items: center;
}
     .col{
     flex: 1 50%;

} .row{ flex-wrap: wrap; } }

Tyler Dix
Tyler Dix
14,230 Points
Tyler Dix
Tyler Dix
14,230 Points

I'm struggling the with flex shorthand as well. I really wish we'd be taught the "longhand" version so that we understand what the shorthand version is doing.

The flex property accepts three values. The first value is the flex-grow, the second value is the flex-shrink, and the third value is the flex-basis. The default values are 0, 1, auto.

In your code, you're passing "50%" in to the second value, flex-shrink.

Try typing this out longhand and see if it works:

.col {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 50%;
}

shorthand version:

.col {
  flex: 1 1 50%;
}

1 Answer

Yvette Pascacsio
Yvette Pascacsio
5,522 Points
Yvette Pascacsio
Yvette Pascacsio
5,522 Points

Flex-shrink doesn't take percentages, it works the same way as flex-grow, just opposite. Flex-basis uses percentages, and other units that are commonly used to define width. So, when you have a declaration "flex: 1 50%;" , the 50%, is defining the flex-basis, while the shrink is not being defined at all, accept by default.