Jei į outer pridėsime dar du vidinius elementus, kaip jie bus išdėstyti? Kaip juos horizontaliai išdėstyti?

Jei pridėsite du naujus vidinius elementus į konteinerį su klase outer, jie pagal numatytuosius nustatymus bus išdėstyti vertikaliai vienas po kito, nes HTML blokiniai elementai išsidėsto stulpeliu.

Norint juos išdėstyti horizontaliai, galite naudoti CSS Flexbox. Pavyzdžiui:

.outer {
  display: flex;
  flex-direction: row; /* pagal numatytuosius nustatymus, gali būti nereikalinga nurodyti */
}

Tai užtikrins, kad visi .outer vaikų elementai bus išdėstyti eilutėje (horizontaliai). Galite pridėti tarpus, išlyginimą ir kitas savybes tikslesniam nustatymui.