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;">

js小提琴

更新

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

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

Answer 2

看起来您的样式标签前面有一个句点。 这可能就是为什么它没有选择 display:flex，但我也会添加 flex-wrap:wrap; justify-content:center（或 space-around、space-between，无论你喜欢哪个）和 align-items:flex-start 或 center。

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

希望有帮助！