Outer içine iki iç öğe daha eklersek, nasıl konumlanırlar? Bunları yatay olarak nasıl yerleştirebiliriz?

Bir outer sınıfına sahip konteyner içine iki yeni iç öğe eklediğinizde, varsayılan olarak bunlar dikey olarak, yani biri diğerinin altında sıralanır, çünkü HTML'de blok öğeler kolon halinde dizilir.

Bunları yatay olarak düzenlemek için CSS Flexbox kullanabilirsiniz. Örneğin:

.outer {
  display: flex;
  flex-direction: row; /* varsayılan, belirtmeye gerek olmayabilir */
}

Bu, .outer içindeki tüm çocuk öğelerin satır halinde (yatay) dizilmesini sağlar. Daha hassas ayarlar için boşluklar, hizalama ve diğer özellikler ekleyebilirsiniz.