آموزش پیشرفته Flexbox و Grid در CSS - تکنیک‌های حرفه‌ای چیدمان

Flexbox و Grid دو سیستم مدرن چیدمان در CSS هستند که:

چیدمان‌های پیچیده را ساده می‌کنند
واکنش‌گرایی (Responsive) را آسان‌تر می‌کنند
نیاز به فریمورک‌هایی مثل Bootstrap را کاهش می‌دهند

✨ بخش 1: Flexbox پیشرفته

1. مفاهیم کلیدی Flexbox


.container {
  display: flex;
  flex-direction: row; /* یا column */
  justify-content: center; /* تنظیم محور اصلی */
  align-items: stretch; /* تنظیم محور فرعی */
  flex-wrap: wrap; /* رفتن به خط جدید */
  gap: 20px; /* فاصله بین آیتم‌ها */
}

2. تکنیک‌های حرفه‌ای

ترتیب دلخواه آیتم‌ها:
```
.item:nth-child(2) { order: -1; }
```

توزیع فضای باقیمانده:


.main-content { flex: 1; } /* فضای باقیمانده را پر می‌کند */

3. مثال عملی: منوی مدرن


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo { margin-right: auto; } /* لوگو را به چپ می‌چسباند */

🔳 بخش 2: CSS Grid پیشرفته

1. ساختار پایه Grid


.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px auto;
  gap: 15px;
}

2. تکنیک‌های پیشرفته

مناطق نام‌گذاری شده (Named Areas):


.container {
  grid-template-areas:
    "header header header"
    "sidebar main main";
}

.header { grid-area: header; }

چیدمان واکنش‌گرا با Grid:


@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar";
  }
}

3. مثال عملی: گالری تصاویر


.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 200px;
  gap: 10px;
}

🎭 بخش 3: انیمیشن‌های CSS پیشرفته

1. انیمیشن‌های پایه


@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.element {
  animation: slide-in 0.5s ease-out forwards;
}

2. تکنیک‌های حرفه‌ای

انیمیشن‌های چندمرحله‌ای:


@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

کنترل انیمیشن با JavaScript:


element.style.animationPlayState = "paused";

3. مثال عملی: دکمه تعاملی


.button {
  transition: all 0.3s ease;
}

.button:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

🚀 پروژه عملی: ساخت کارت محصول تعاملی


<div class="product-card">
  <div class="product-image"></div>
  <div class="product-info">
    <h3>نام محصول</h3>
    <p>توضیحات کوتاه</p>
    <button>افزودن به سبد</button>
  </div>
</div>


.product-card {
  display: grid;
  grid-template-rows: 200px auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.product-image {
  background: url('product.jpg') center/cover;
  transition: transform 0.5s;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}