چیدمان با فلکس‌باکس

تا این جا عنصرهای صفحه خودشان از بالا به پایین چیده می‌شدند و هیچ کنترلی بر کنار هم نشستن آن‌ها نداشتید. چطور نوار ناوبری بسازید که نام سایت یک‌طرف باشد و پیوندها طرف دیگر؟ چطور کارت‌ها را در یک ردیف مساوی کنید؟ پاسخ مدرن و ساده، فلکس‌باکس (Flexbox) است: الگویی برای چیدمان یک‌بعدی، یعنی یک ردیف یا یک ستون از عنصرها.

کانتینر و آیتم‌ها

روی عنصر والد display: flex می‌گذارید و همان لحظه فرزندان مستقیم آن «آیتم فلکس» می‌شوند و در یک ردیف می‌نشینند. به والد، کانتینر فلکس می‌گوییم:

.toolbar {
  display: flex;
  gap: 12px;
}

<div class="toolbar">
  <button>Save</button>
  <button>Preview</button>
  <button>Publish</button>
</div>

از این سادگی همه تعجب می‌کنند: فقط یک سطر CSS، بدون هیچ حساب‌وکتابی، سه دکمه کنار هم نشستند.

دو محور: اصلی و عرضی

همهٔ فلکس‌باکس حول دو محور می‌چرخد. «محور اصلی» (Main Axis) جهت پیشروی آیتم‌هاست و «محور عرضی» (Cross Axis) عمود بر آن. با flex-direction جهت محور اصلی را تعیین می‌کنید؛ مقدار پیش‌فرض row یعنی ردیف افقی و column یعنی ستون عمودی. در صفحه‌های راست‌به‌چپ، ردیف از راست به چپ پیش می‌رود و خود مرورگر این را با dir="rtl" مدیریت می‌کند.

چرا این تفکیک مهم است؟ چون هر ویژگی تراز فقط یکی از دو محور را کنترل می‌کند و پیش از نوشتن کد باید بدانید محور اصلی شما افقی است یا عمودی.

تراز در محور اصلی: justify-content

ویژگی justify-content آیتم‌ها را در امتداد محور اصلی پخش می‌کند:

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

.gallery-actions {
  display: flex;
  justify-content: center;
}

مقدارهای پرکاربرد: flex-start (پیش‌فرض؛ از آغاز محور)، flex-end، center، space-between (فاصلهٔ برابر میان آیتم‌ها و چسبیدن دو سر به لبه‌ها)، space-around و space-evenly. الگوی رایج نوار ناوبری با space-between ساخته می‌شود: نام سایت به یک لبه می‌چسبد و پیوندها به لبهٔ مقابل:

<nav class="navbar">
  <span>DocNameh</span>
  <div class="links">
    <a href="/">Home</a>
    <a href="/courses">Courses</a>
  </div>
</nav>

تراز در محور عرضی: align-items

ویژگی align-items روی محور عرضی کار می‌کند و مقدار پیش‌فرض آن stretch است؛ یعنی آیتم‌ها به اندازهٔ بلندترین همسایه کشیده می‌شوند. مقدار center یکی از معروف‌ترین ترفندهای CSS را می‌سازد: وسط‌کردن کامل، هم افقی هم عمودی:

.hero {
  display: flex;
  justify-content: center; /* center on the main axis */
  align-items: center;     /* center on the cross axis */
  min-height: 300px;
}

فاصله و شکستن ردیف

به‌جای margin روی تک‌تک آیتم‌ها، از gap روی کانتینر استفاده کنید؛ فاصلهٔ یکنواخت میان آیتم‌ها بدون فضای اضافه در ابتدا و انتها. و اگر آیتم‌ها بیشتر از ظرفیت ردیف‌اند، flex-wrap: wrap اجازه می‌دهد آیتم‌های سرریز به ردیف بعدی بروند؛ همین دو ویژگی پایهٔ ردیف کارت‌های واکنش‌گراست:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.cards .card {
  width: 220px;
}

انعطاف آیتم‌ها: flex

تا این جا همهٔ تنظیم‌ها روی والد بود؛ حالا نوبت خود آیتم‌هاست. ویژگی flex مشخص می‌کند آیتم در تقسیم فضای خالی چقدر سهم دارد. مقدار flex: 1 یعنی این آیتم در رشد، هم‌سایه‌های برابر خود را همراهی کند. الگوی چیدمان دو ستونی «ستون کناری + محتوای اصلی» با همین ویژگی ساخته می‌شود:

.layout {
  display: flex;
  gap: 24px;
}

.sidebar {
  width: 250px; /* stays a fixed width */
}

.main {
  flex: 1; /* takes the rest of the row's space */
}

اگر یکی از آیتم‌ها استثنا باشد، روی همان آیتم align-self بگذارید تا رفتار align-items والد را برای خودش لغو کند.

تمرین‌ها

/* Write your code here */

nav {
  display: flex;
  justify-content: space-between;
}

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.cards .card {
  width: 240px;
}

:::

خلاصه

• display: flex روی والد، فرزندان را به آیتم‌های یک ردیف تبدیل می‌کند.
• محور اصلی را flex-direction تعیین می‌کند و هر ویژگی تراز فقط یکی از دو محور را می‌گیرد.
• justify-content برای محور اصلی و align-items برای محور عرضی است؛ ترکیب هر دو با center، وسط‌کردن کامل می‌سازد.
• gap فاصلهٔ یکنواخت می‌دهد و flex-wrap: wrap آیتم‌های سرریز را به ردیف بعد می‌برد.
• ویژگی flex روی آیتم سهم رشد آن در فضای خالی را تعیین می‌کند؛ flex: 1 ستون اصلی چیدمان‌ها است.

با یک ردیف و یک ستون کار می‌کنید؛ در درس بعدی با گرید، چیدمان دو بُعدیِ هم‌زمان ردیف و ستون را می‌آموزید.