Flexbox行不起作用，强制列布局

Question

我尝试学习flexbox并使用它来做一些项目，但每当我将容器设置为display: flex时，我的行都会变成列，而flex-direction属性就像没有响应，它赢了＆＃ 39;将它们分成几行。

我做错了什么？因此，我疯了，目前的代码如下：

＆＃13;

＆＃13;

.container {
  width: 60vw;
  height: 45vw;
  display: flex;
}

.row {
  flex-basis: 300px;
  flex-direction: row;
}

＆＃13;

<div class="container">
  <div class="row" style="background: red"></div>
  <div class="row" style="background: blue"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

对于要垂直堆叠的项目并创建行，您可以将方向设置为column

注意，应在Flex容器上设置属性flex-direction，而不是其项目

.container {
  width: 60vw;
  height: 45vw;
  display: flex;
  flex-direction: column;
}

.row {
  flex-basis: 300px;
}

<div class="container">
  <div class="row" style="background: red"></div>
  <div class="row" style="background: blue"></div>
</div>