How do I add flex-direction and flex-wrap to the same row?

Question

I have this React component:

<Card className = 'form-margin width card' zDepth='3'>
    <CardText>
        <strong>Test</strong><br />
        This is some text
    </CardText>
    <CardActions>
        <FlatButton label="Edit" />
        <FlatButton label="Delete" />
    </CardActions>

</Card>

<Card className = 'form-margin width card' zDepth='3'>
    <CardText>
        <strong>Test</strong><br />
        This is some text
    </CardText>
    <CardActions>
        <FlatButton label="Edit" />
        <FlatButton label="Delete" />
    </CardActions>

</Card>

The CSS:

.form-margin {
  margin: 10px;
}

.pitch-width {
  width: 40%;
}

How would I add them to the same row and apply flex-direction and flex-wrap? (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

I tried

.card {
  flex-direction: row;
}

but it didn't do anything.

Answer 1

To put a formal answer to your question, in order to access the flexbox related CSS styles, you need to set the display context to be display: flex. This way all children of that element will be in a flex mode and be able to use the flex styling.

In your case, it sounds like you need to have it so the parent will have display: flex and then the relevant children, in this case .card will have flex-direction set.