حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
آموزش CSS از صفر؛ طراحی صفحه با Flexbox و Grid

آموزش display:flex در CSS؛ ساخت ردیف ابزار

چیدمان یک‌بعدی با Flexbox در CSS · 0٪

Flexbox ابزاری برای چیدن چند فرزند در یک محور اصلیه. کافی است display:flex رو روی ظرف بنویسی تا فرزندهای مستقیمش به آیتم‌های فلکس تبدیل بشن. لازم نیست به تک‌تک فرزندها دستور شناورشدن بدی یا فاصله‌های خالی توی HTML اضافه کنی. خود ظرف مدیریت رابطه بین آیتم‌ها رو بر عهده می‌گیره و هر آیتم همچنان محتوای خودش رو نگه می‌داره.

در مثال، دکمه‌های یک نوار ابزار فرزند مستقیم ظرف هستن و کنار هم قرار می‌گیرن. یک خطای رایج گذاشتن display:flex روی خود دکمه‌هاست؛ اون کار فقط محتوای داخل هر دکمه رو فلکس می‌کنه و رابطه دکمه‌ها با هم عوض نمی‌شه. توی متن فارسی، جهت پایه راست به چپه و ردیف معمولی از سمت راست شروع می‌شه. اینجا هنوز توزیع فضای اضافه یا چندردیفی نداریم. اول رابطه والد و فرزند رو از روی HTML پیدا کن؛ بیشتر اشتباه‌های شروع فلکس با انتخاب‌کردن ظرف نادرست اتفاق می‌افتن.

✍️ مثال حل‌شده:

<div class="tools"><button>ذخیره</button><button>بازگشت</button></div>
<style>.tools { display:flex; }</style>

حالا نوبت توئه: نمونه .toolbar را ببین: ظرف display:flex دارد و سه دکمه فرزند مستقیم آن هستند. ترتیب HTML و جهت rtl را حفظ کن؛ هدف این گام شناخت ظرف فلکس و آیتم‌های مستقیم آن است. بررسی کن که فلکس روی والد نوشته شده، نه روی هر دکمه.

فعالیت شما

نمونه .toolbar را ببین: ظرف display:flex دارد و سه دکمه فرزند مستقیم آن هستند. ترتیب HTML و جهت rtl را حفظ کن؛ هدف این گام شناخت ظرف فلکس و آیتم‌های مستقیم آن است. بررسی کن که فلکس روی والد نوشته شده، نه روی هر دکمه.

مطالعهٔ این گام برای همه آزاد است

برای پاسخ‌دادن، بررسی پاسخ، ثبت پیشرفت و استفاده از دستیار باید شرایط شرکت در فعالیت‌ها را داشته باشید.

برای انجام فعالیت وارد شوید

برای انجام فعالیت‌ها ابتدا این دوره‌های پیش‌نیاز را تکمیل کنید:

کد اولیهٔ فعالیت

<!doctype html>
<html lang="fa" dir="rtl">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>تمرین CSS</title></head>
<body>
<div class="toolbar"><button>جدید</button><button>ویرایش</button><button>بستن</button></div>
</body>
</html>

ظاهر صفحه (CSS)

body{margin:0;padding:16px;font-family:Tahoma,Arial,sans-serif;direction:rtl;color:#1f2937;background:#f3f4f6}*{box-sizing:content-box}
.toolbar{display:flex}