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

【问题标题】：How do I add flex-direction and flex-wrap to the same row?如何将 flex-direction 和 flex-wrap 添加到同一行？
【发布时间】：2017-11-06 23:56:16
【问题描述】：

我有这个 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;
}

但它什么也没做。

【问题讨论】：

您需要使用display: flex 以便元素知道使用弹性框格式化上下文
我把它改成了 .card{display: flex; flex-direction: row} 并且它们还没有排在同一行上。
理想情况下，我相信 display: flex 添加到容器中？实际上你有可以用 jsFiddle、codepen 或 stack sn-p 生成的示例吗？
哦，成功了！添加了<div className='card'> ... </div> 作为父级，它起作用了！
很高兴成功了！添加了正式答案

标签： css react-native flexbox react-native-flexbox

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：