Hogyan helyezkednek el, ha még két belső elemet adunk az outerbe? Hogyan helyezzük el őket vízszintesen?

Ha két új belső elemet ad hozzá egy outer osztályú konténerhez, azok alapértelmezés szerint függőlegesen, egymás alatt helyezkednek el, mivel a HTML-ben a blokk elemek oszlopként rendeződnek.

Azok vízszintes elrendezéséhez használhatja a CSS Flexbox-ot. Például:

.outer {
  display: flex;
  flex-direction: row; /* alapértelmezett, nem feltétlenül szükséges megadni */
}

Ez azt eredményezi, hogy az összes .outer gyermekelem egymás mellett, vízszintesen lesz elhelyezve. Margókat, igazítást és más tulajdonságokat adhat hozzá a pontosabb beállításhoz.