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) {


{ display: flex; }

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

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

Tyler Dix
Tyler Dix
14,226 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
4,248 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.