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

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,228 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

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.