如何将 flex-direction 和 flex-wrap 添加到同一行？

Question

我有这个 React 组件：

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

CSS:

.form-margin {
  margin: 10px;
}

.pitch-width {
  width: 40%;
}

如何将它们添加到同一行并应用 flex-direction 和 flex-wrap？ (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

我试过了

.card {
  flex-direction: row;
}

但它什么也没做。

Answer 1

要正式回答您的问题，为了访问 flexbox 相关的 CSS 样式，您需要将显示上下文设置为 display: 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>

如何将 flex-direction 和 flex-wrap 添加到同一行？

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

css

flexbox

react-native

react-native-flexbox