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 方向更改為列的列中時，您可能還需要添加它。

希望有幫助！