justify-content آیتم‌ها رو در محور اصلی مدیریت می‌کنه و align-items در محور عمود بر اون. در یک ردیف معمولی، اولی روی توزیع افقی و دومی روی تراز عمودی اثر می‌ذاره. اگر جهت ستون بشه، نقش افقی و عمودی جابه‌جا می‌شه، اما رابطه این ویژگی‌ها با محور اصلی ثابت می‌مونه. پس بهتره اول direction رو بخونی و بعد جای ویژگی‌ها رو تصمیم بگیری.
مثال یک ردیف با تراز مرکزی در هر دو محور می‌سازه. تمرین به جای مرکز افقی، دو بخش رو تا دو انتهای ظرف پخش می‌کنه. خطای رایج نوشتن space-between روی align-items است؛ این مقدار برای توزیع آیتم‌های محور اصلی با justify-content به کار میاد. ارتفاع ظرف عمداً مشخصه تا مرکز عمودی واقعاً دیده بشه. مقدارهای اشتباه موجود رو جابه‌جا یا اصلاح کن و جهت ردیف رو حفظ کن. افزودن marginهای حدسی ممکنه در یک متن کوتاه شبیه خروجی بشه، ولی منطق دو محور رو منتقل نمی‌کنه.
✍️ مثال حل‌شده:
<div class="center"><span>وضعیت</span><button>ادامه</button></div>
<style>.center { display:flex; height:70px; justify-content:center; align-items:center; }</style>
حالا نوبت توئه: نوار .bar با جهت row، عرض ۳۶۰ و ارتفاع ۸۰ پیکسل باید display:flex، justify-content:space-between و align-items:center داشته باشد. متن و دکمه را نگه دار. تراز اصلی را با marginهای دستی جبران نکن؛ دو محور را روی خود ظرف درست تنظیم کن.
فعالیت شما
نوار .bar با جهت row، عرض ۳۶۰ و ارتفاع ۸۰ پیکسل باید display:flex، justify-content:space-between و align-items:center داشته باشد. متن و دکمه را نگه دار. تراز اصلی را با marginهای دستی جبران نکن؛ دو محور را روی خود ظرف درست تنظیم کن.