Flex-Artikel, die nicht nebeneinander ausgerichtet sind

Question

Ich habe den folgenden Code. Die Skalierung von Divs und Schriftarten funktioniert perfekt mit mir.

Ich habe es mit mobilen zuerst gedacht, so für kleine Bildschirme, die widgets kommen unter einander wie erforderlich.

In großen Bildschirmen, wie Laptop, sollten 3 Widgets nebeneinander kommen. Leider bekomme ich sie immer noch unter einander, ein Widget pro Zeile.

Was ich vermisse oder einen Fehler mache ich hier?

* { 
 
    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 
 
} 
 
/* \t 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

Sie haben Syntaxfehler.

Das ist falsch:

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

Es sollte:

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

jsFiddle

UPDATE

Verwendung flex-wrap:wrap es einzuwickeln richtig in Zeilen/Spalten zu m ake es am besten auf dem Bildschirm angezeigt

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

Answer 2

Es sieht aus wie Sie einen Punkt vor dem Stil-Tag haben. Das ist vielleicht der Grund, warum es das Display nicht aufnimmt: flex, aber ich würde auch flex-wrap hinzufügen: wrap; justify-content: center (oder space-around, space-between, je nachdem was du bevorzugst) und align-items: flex-start oder center.

Sie müssen möglicherweise auch für die Medienabfrage hinzufügen, wenn Sie möchten, dass sie sich in einer Spalte befindet und die Flex-Richtung zu einer Spalte ändert.

Hoffe, dass hilft!