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。这样，该元素的所有子元素都将处于弹性模式，并且能够使用flex样式。

在您的情况下，听起来您需要拥有它，以便父级将display: flex，然后相关的子级，在这种情况下.card将设置弹性方向。

Answer 2

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

.outer-box {
  display: flex;
}

＆＃13;

.outer-box {
  display: flex;
}

.form-margin {
  margin: 10px;
}

.pitch-width {
  width: 40%;
}

.card {
  flex-direction: row;
}

＆＃13;

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

＆＃13;

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

2 个答案: