თუ inner-ელემენტები კიდევ ორი დამატებით შევიტანეთ outer-ის შიგნით, როგორ განთავსდებიან ისინი? როგორ განლაგება მათ ჰორიზონტალურად?

თუ დაამატებთ ორი ახალი შიდა ელემენტს outer კლასის კონტეინერში, ისინი დეფოლტად განთავსდებიან ვერტიკალურად, ერთი მეორის ქვეშ, რადგან HTML-ში ბლოკური ელემენტები განლაგებულია სვეტად.

მათ ჰორიზონტალურად განლაგებისთვის შეგიძლიათ გამოიყენოთ CSS Flexbox. მაგალითად:

.outer {
  display: flex;
  flex-direction: row; /* დეფოლტად, შეიძლება არ იყოს საჭირო მითითება */
}

ეს უზრუნველყოფს, რომ ყველა შვილობილი ელემენტი .outer-ის განლაგდება ხაზზე (ჰორიზონტალურად). შეგიძლიათ დაამატოთ შუალედები, განლაგება და სხვა თვისებები უფრო ზუსტი კონფიგურაციისთვის.