css - Flex 元素没有并排对齐

Question

我有以下代码。 div 和字体大小调整非常适合我。

我在设计它时首先想到的是移动设备，因此对于小屏幕，widgets 会根据需要相互放在一起。

在笔记本电脑等大屏幕上，3 个小部件应该并排显示。不幸的是，我仍然把它们放在一起，每行一个小部件。

我在这里遗漏了什么或我做错了什么？

* {
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
html,
body {
  font-family: Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.5
}
html {
  overflow-x: hidden
}
h1 {
  font-size: 5.7vw;
}
h2 {
  font-size: 4.0vw;
}
h3 {
  font-size: 2.8vw;
}
.widget {
  position: relative;
  padding: 0.01em 8px;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 10px;
  margin-right: 0px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)!important;
  width: 30vw;
}
.topleft {
  position: relative;
  text-align: left;
  left: 0;
  top: 0;
  opacity: .3
}
.bottomright {
  position: relative;
  text-align: right;
  right: 0;
  bottom: 0;
  opacity: .3
}
/*	p {font-size: 2.5vw;}  */

.kpi {
  text-align: center;
  line-height: 6vw;
  font-size: 7vw;
  margin: 0 0 0 0;
}
@media (max-width: 1024px) {
  /*       p {font-size: 3.5vw;}  */
  .kpi {
    font-size: 11.5vw;
    line-height: 10.5vw;
  }
  .widget {
    width: 50vw;
  }
}
@media (max-width: 600px) {
  /*       p {font-size: 3.5vw;}  */
  .kpi {
    font-size: 20vw;
    line-height: 19vw;
  }
  .widget {
    width: 85vw;
  }
  .topleft {
    font-size: 4vw;
  }
  .bottomright {
    font-size: 6vw;
  }
}
@media (max-width: 800px) {
  aside,
  section {
    width: auto;
    float: none;
  }
}

<main class="main" .style="{ display: flex; /* or inline-flex */ flex-direction: row;}">
  <div class='widget'>
    <p class='topleft'>SoH</p>
    <p class='kpi'>12345</p>
    <p class='bottomright'>KG</p>
  </div>
  <div class='widget'>
    <p class='topleft'>SoH</p>
    <p class='kpi'>12345</p>
    <p class='bottomright'>KG</p>
  </div>
  <div class='widget'>
    <p class='topleft'>SoH</p>
    <p class='kpi'>12345</p>
    <p class='bottomright'>KG</p>
  </div>
</main>

Answer 1

你有语法错误。

这是错误的:

<main class="main" .style="{ display: flex; /* or inline-flex */ flex-direction: row;}">

应该是:

<main class="main" style="display: flex; flex-direction: row;">

jsFiddle

更新

使用 flex-wrap:wrap 将其正确包装在行/列中，使其在屏幕上显示效果最佳

<main class="main" style="display: flex; flex-wrap:wrap;">