Flexbox issue in css

I’m having an issue with making a flexbox for an assignment in school. I cannot figure out what to do.

@charset "utf-8";

section {
  display: flex;
  flex-flow: row wrap-reverse:
}

div.card {
  display: flex;
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 200px;
  flex-flow: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
flex-flow: row wrap-reverse:

The colon : at the end should be a semi-colon ;


Other than that it is pretty hard to say anything without knowing what the assignment and requirements are.

It’s asking me to set the section element’s flexbox to row order in reverse wrapping.

Then set the growth and shrink rate of the div elements of the card class to 1 and 1. Set the flex basis of those elements to 200 pixels. Display each div element of the card class itself as a flexbox.

Next, apply the following flex layout to the items within the card div elements:

  1. Lay out the items in column order with no wrapping.
  2. Justify the content of the items within the flexbox with space between.
  3. Center each of the items with respect to the cross axis.
    I’ve been trying for hours and I can’t get it.

Did you fix the syntax error?


Maybe they want you to use flex-direction and not flex-flow with an empty flex-wrap value. Or maybe they want you to use flex-flow with the flex-wrap value specified?

div.card {
  flex-flow: column;
  flex-wrap: nowrap;
}

Can also be written as:

div.card {
  flex-direction: column;
  flex-wrap: nowrap;
}

or

div.card {
  flex-flow: column nowrap;
}

You can write code that does the correct thing but isn’t written as expected. I depends on how the code is tested. That is the editor code vs the DOM element styles.

It still doesn’t work, idk what they want from me. Thanks for the help though!

Well, if it is an assignment for school hopefully you can get some clarification.

Is there just a single test for all the requirements? I would expect a more granular approach where each requirement has its own test.

If they are testing the editor code it is much harder to know exactly what is expected. But if that is the case, one thing I would try is using a .card selector instead of div.card just in case a specific selector is expected.

It is individual separate tasks that you run. With this one, they have to be done together so it’s more confusing.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.