Πώς θα τοποθετηθούν αν προσθέσουμε άλλα δύο εσωτερικά στοιχεία μέσα στο outer; Πώς να τα τοποθετήσουμε οριζόντια;

Αν προσθέσετε δύο νέα εσωτερικά στοιχεία μέσα σε ένα κοντέινερ με την κλάση outer, αυτά θα τοποθετηθούν προεπιλεγμένα κάθετα το ένα κάτω από το άλλο, καθώς τα μπλοκ στοιχεία στο HTML τοποθετούνται σε στήλη.

Για να τα τοποθετήσετε οριζόντια, μπορείτε να χρησιμοποιήσετε το CSS Flexbox. Για παράδειγμα:

.outer {
  display: flex;
  flex-direction: row; /* προεπιλογή, μπορεί να μην χρειάζεται να οριστεί */
}

Αυτό θα κάνει όλα τα παιδικά στοιχεία του .outer να τοποθετούνται σε γραμμή (οριζόντια). Μπορείτε να προσθέσετε περιθώρια, ευθυγράμμιση και άλλες ιδιότητες για πιο ακριβή ρύθμιση.