Flex items not aligning side-by-side

Question

I've the below code. The divs and fonts resizing are working perfectly with me.

I designed it with mobile first in mind, so for small screens, the widgets are coming under each other as required.

In big screens, like laptop, 3 widgets should come beside each other. Unfortunately, I'm still getting them under each other, one widget each line.

What I'm missing or a mistake I'm doing here?

 * { 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

You have syntax errors.

This is wrong:

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

It should be:

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

jsFiddle

UPDATE

use flex-wrap:wrap to wrap it properly in rows/columns to make it best displayed in the screen

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

Answer 2

It looks like you have a period in front of the style tag. That might be why it is not picking up the display:flex, but I would also add flex-wrap:wrap; justify-content:centre (or space-around, space-between, whichever you prefer) and align-items:flex-start or centre.

You also might need to add for the media query when you want it to be in a column changing the flex direction to a column.

Hope that helps!