Question

（（可能必须刷新页面才能使GIF正常工作）

我具有要使用flexbox进行的所有设置，因此当浏览器窗口更改时，它的大小会发生变化，我只需要使这三个部分在屏幕尺寸大于710px时从左到右显示在三个垂直行中。

我尝试使用flex-direction：row;和flex-direction：列；但他们似乎不想工作！即使当我使用证明内容或对齐项目时，这三个部分也会中断并以奇怪的方式排列。我认为这是我的一些混乱的代码，但我无法弄清楚！

这是我想给任何人看的代码。

我希望将三列从左到右排列在各自独立的上下列中，并均匀隔开，并随着flex的收缩和增长。

Answer 1

我刚刚检查了代码结构。没有代码问题。您需要在clear: both;元素中添加main类。我已经尝试过并且可以正常工作。

@media screen and (min-width: 710px) {
  main {
    display: flex;
    flex-direction: row;
    clear: both;
  }
}

这是解决方案：