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.

You need to use `display: flex` so the elements know to use the flex-box formatting context — aug, Nov 06 '17 at 23:58
I changed it to .card{display: flex; flex-direction: row} and they aren't lining up on the same row still. — Morgan Allen, Nov 07 '17 at 00:02
Ideally, display: flex is added to the container I believe? Actually do you have an example that can be produced with a jsFiddle, codepen, or stack snippet? — aug, Nov 07 '17 at 00:09

score 2 · Accepted Answer · answered Nov 07 '17 at 02:21

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.

score 0 · Answer 2 · answered Nov 07 '17 at 02:29

You need to create an outer box wrapping both cards and apply

.outer-box {
  display: flex;
}

.outer-box {
  display: flex;
}

.form-margin {
  margin: 10px;
}

.pitch-width {
  width: 40%;
}

.card {
  flex-direction: row;
}

<div class="outer-box">
  <div class='form-margin width card'>
    <div>
      <strong>Test</strong><br /> This is some text
    </div>
    <div>
      <span>Edit</span>
      <span>Delete</span>
    </div>

  </div>

  <div class='form-margin width card'>
    <div>
      <strong>Test</strong><br /> This is some text
    </div>
    <div>
      <span>Edit</span>
      <span>Delete</span>
    </div>

  </div>
</div>

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

2 Answers2