CODEWITHSUNDEEP
cssreact-nativeflexboxreact-native-flexbox
dropWizard
dropWizard

Reputation: 3538

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

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.

Upvotes: 0

Views: 976

Answers (2)

Vincent1989
Vincent1989

Reputation: 1657

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>

Upvotes: 0

aug
aug

Reputation: 11714

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.

Upvotes: 2

Related Questions