0

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.

Rob
  • 14,746
  • 28
  • 47
  • 65
Morgan Allen
  • 3,291
  • 8
  • 62
  • 86

2 Answers2

2

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.

aug
  • 11,138
  • 9
  • 72
  • 93
0

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>
Vincent1989
  • 1,593
  • 2
  • 13
  • 25