Lecția 10.1 Flexbox și Grid în CSS pentru Layout-uri Flexibile și Responsive

Overview:

În această lecție, vom aborda conceptele de Flexbox și Grid în CSS, două tehnici puternice pentru aranjarea și alinierea flexibilă a elementelor pe pagină. Aceste abordări permit dezvoltatorilor să creeze layout-uri complexe, adaptabile la diferite dimensiuni de ecrane și dispozitive.

Key Concepts:

1. Flexbox:
   • Container Flex: Elementul părinte care devine un container flex prin setarea proprietății display: flex.
   • Elemente Flexibile: Elementele copil dintr-un container flex.
   • Proprietăți Cheie:
     • justify-content: Alinierea orizontală a elementelor flexibile.
     • align-items: Alinierea verticală a elementelor flexibile.
     • flex-direction: Direcția în care elementele flexibile sunt aranjate.
2. Grid:
   • Container Grid: Elementul părinte care devine un container grid prin setarea proprietății display: grid.
   • Celule Grid: Spațiile individuale în cadrul grid-ului.
   • Proprietăți Cheie:
     • grid-template-rows și grid-template-columns: Stabilirea numărului și dimensiunilor rândurilor și coloanelor.
     • grid-gap sau grid-row-gap și grid-column-gap: Definirea spațiilor între celulele grid-ului.

Detailed Examples:

1. Flexbox pentru Alinearea Elementelor:

/* Stilizare pentru containerul flex */
.flex-container {
  display: flex;
  justify-content: space-around; /* Aliniere orizontală */
  align-items: center; /* Aliniere verticală */
}

/* Stilizare pentru elementele flexibile */
.flex-item {
  flex: 1;
  margin: 10px;
  padding: 20px;
  border: 1px solid #999;
}

2. Grid pentru Aranjarea Elementelor într-un Grid:

/* Stilizare pentru containerul grid */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 coloane cu aceeasi latime */
  grid-gap: 15px; /* Spatiu intre celule */
}

/* Stilizare pentru elementele din grid */
.grid-item {
  padding: 20px;
  border: 1px solid #ccc;
}