css - 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

要正式回答您的问题，为了访问与 flexbox 相关的 CSS 样式，您需要将显示上下文设置为display: flex. 这样，该元素的所有子元素都将处于 flex 模式并能够使用 flex 样式。

在您的情况下，听起来您需要拥有它，以便父母拥有display: flex，然后是相关的孩子，在这种情况下.card将设置 flex-direction 。

Answer 2

您需要创建一个包装两张卡片的外盒并应用

.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>