Flexbox σε CSS: Πρώτα βήματα για τη δόμηση του ιστότοπού σας

Σε αυτό το σεμινάριο, θα μάθετε πώς να κατασκευάζετε ένα δείγμα δομής για τα διαδικτυακά σας έργα χρησιμοποιώντας τη διάταξη Flexbox σε CSS και HTML. Θα εξετάσουμε τα ενσωματωμένα εργαλεία εντοπισμού σφαλμάτων του Visual Studio Code σε συνδυασμό με τον Microsoft Edge και θα κάνουμε τα πρώτα βήματα για την ενεργοποίηση της διάταξης Flexbox. Το Flexbox είναι ένα ισχυρό σύστημα διάταξης που σας βοηθά να δημιουργείτε σύνθετες διατάξεις με λίγη προσπάθεια και ευέλικτη διάταξη των στοιχείων.

Βασικά συμπεράσματα

• Το Flexbox σας επιτρέπει να διατάξετε τα στοιχεία οριζόντια και κάθετα.
• Τα εργαλεία ανάπτυξης του Microsoft Edge μπορούν να ενσωματωθούν απευθείας στο Visual Studio Code.
• Το Flex-Direction επηρεάζει την ευθυγράμμιση των στοιχείων Flex.

Οδηγίες βήμα προς βήμα

Αρχικά θα εγκαταστήσετε τα εργαλεία Microsoft Edge Tools στο Visual Studio Code. Αναζητήστε το "Microsoft Edge Tools for VS Code" στις επεκτάσεις και εγκαταστήστε το.

Αφού εγκατασταθεί η επέκταση, πρέπει να μεταβείτε στις επιλογές εντοπισμού σφαλμάτων. Κάντε κλικ στο "Εκτέλεση και αποσφαλμάτωση" και στη συνέχεια στο "δημιουργία αρχείου launch.json". Αυτό θα σας βοηθήσει να διαμορφώσετε τις ρυθμίσεις σας.

Στο αρχείο ρυθμίσεων που έχει πλέον δημιουργηθεί, προσθέστε μια νέα ρύθμιση για τα "Εργαλεία Microsoft Edge". Βεβαιωθείτε ότι έχετε εισάγει την τοπική διεύθυνση localhost:3000, καθώς εκτελούμε τον διακομιστή σε αυτή τη θύρα στο τερματικό μας.

Τώρα ήρθε η ώρα να ξεκινήσετε το έργο σας. Αλλάξτε στον σωστό υποκατάλογο και εκτελέστε την εντολή npm run dev. Στη συνέχεια, ανοίξτε το localhost:3000 στο πρόγραμμα περιήγησής σας.

Μόλις φορτώσετε τη σελίδα, μπορείτε να ενεργοποιήσετε τα εργαλεία ανάπτυξης του Microsoft Edge κάνοντας κλικ στο αντίστοιχο κουμπί στο Visual Studio Code. Αυτό θα ανοίξει το εργαλείο ανάπτυξης ακριβώς δίπλα στον επεξεργαστή σας.

Τώρα μπορείτε να δείτε τη δομή της εφαρμογής σας. Έχουμε έναν περιέκτη (div) με την κλάση "Flex Container". Μέσα σε αυτό το δοχείο υπάρχουν τέσσερα στοιχεία DIV που έχουν την κλάση "Flex Child" και εμφανίζουν το περιεχόμενο κειμένου 1, 2, 3 και 4 αντίστοιχα.

Το flex container ορίζεται προς το παρόν μόνο με πλάτος 400 pixels και ύψος 200 pixels, ενώ τα flex children ορίζονται με πλάτος 100 pixels και ύψος 50 pixels. Παρόλο που κανένα από τα παιδιά δεν είναι προς το παρόν διατεταγμένο με Flexbox, εμφανίζονται σε μια κάθετη λίστα.

Για να χρησιμοποιήσετε ενεργά το Flexbox, πρέπει να προσθέσετε και να αποθηκεύσετε το χαρακτηριστικό CSS display: flex; για το δοχείο Flex. Όταν το κάνετε αυτό, θα δείτε ότι η διάταξη των παιδιών αλλάζει αυτόματα και πλέον εμφανίζονται το ένα δίπλα στο άλλο.

Αν θέλετε να τακτοποιήσετε ξανά τα παιδιά flex κάθετα, μπορείτε να χρησιμοποιήσετε την ιδιότητα flex-direction. Ορίστε flex-direction: column; για το δοχείο flex για να αλλάξετε τον προσανατολισμό των flex children ξανά σε κατακόρυφο.

Θα παρατηρήσετε ότι τα flex children είναι τώρα και πάλι κάθετα διατεταγμένα. Αν τώρα ρυθμίσετε το ύψος και το πλάτος, φαίνεται σαν να είναι ενσωματωμένα σε ένα μπλοκ, ακόμη και αν η εμφάνιση δεν έχει οριστεί σε Block, αλλά σε Flex.

Αυτή ήταν ήδη μια επισκόπηση των βασικών στοιχείων της διάταξης Flexbox. Στο βίντεο συζητήσαμε τις πιο σημαντικές ιδιότητες και είδαμε τα αποτελέσματά τους. Σε μελλοντικά σεμινάρια, θα εξερευνήσουμε περισσότερα χαρακτηριστικά του Flexbox και θα δούμε τι μπορείτε να κάνετε με αυτό το ισχυρό σύστημα διάταξης.

Περίληψη

Σε αυτό το σεμινάριο, μάθατε πώς να δημιουργείτε μια απλή δομή με το Flexbox σε CSS. Ενσωματώσατε τα εργαλεία ανάπτυξης του Microsoft Edge Developer Tools στο Visual Studio Code και κάνατε τα πρώτα βήματα για την ενεργοποίηση της διάταξης Flex. Υπάρχουν ακόμα πολλές δυνατότητες μπροστά σας, τις οποίες θα εξετάσουμε λεπτομερέστερα στα επόμενα βίντεο.