弹性项目没有并排对齐答案

【问题标题】：Flex items not aligning side-by-side弹性项目没有并排对齐
【发布时间】：2017-05-22 09:03:20
【问题描述】：

我有以下代码。调整大小的 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>

【问题讨论】：

标签： css html responsive-design flexbox

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

【讨论】：

谢谢，但现在即使在小屏幕中它也是单行出现的，在小屏幕中应该相互排列:(
那是因为你把 flex 指令放在你的 main 元素中。相反，将其放在媒体查询中。 jsfiddle.net/0n8f5z8s/1
谢谢，它通过将flex-direction: row; 替换为flex-wrap:wrap 来工作
有几种方法可以做到这一点。我能想到至少五个副手，但只有你知道有关布局目标的所有细节。顺便说一句，你不是用flex-wrap: wrap 替换flex-direction: row，你只是添加flex-wrap: wrap。 flex-direction 的默认值已经是 row。

【解决方案2】：

样式标签前面好像有句号。这可能是为什么它没有选择 display:flex，但我也会添加 flex-wrap:wrap; justify-content:centre (或 space-around, space-between, 随你喜欢) 和 align-items:flex-start 或 center。

当您希望媒体查询位于将弯曲方向更改为列的列中时，您可能还需要为媒体查询添加。

希望有帮助！

【讨论】：

非常感谢，flex-wrap:wrap 解决了我的问题，我可以在您的答案中添加代码吗？