فلکس باکس در CSS — مقدمه (Flexbox Intro)
«فلکس باکس (Flexbox)» مدل چیدمان یک بعدی در CSS است که چینش آیتم ها را در یک کانتینر، افقی یا عمودی، انعطاف پذیر و واکنش گرا می کند. با فلکس باکس، بدون تکیه بر float یا موقعیت دهی، سریع تر به طرح های پایدار می رسید.
فلکس باکس در CSS چیست؟
فلکس باکس مخفف «Flexible Box Layout» است. این مدل، ترازبندی و توزیع فضا بین آیتم ها را ساده می کند و در عین حال به تغییر اندازه نما پاسخ می دهد.
نکته: فلکس باکس برای چیدمان یک بعدی (سطر یا ستون) است؛ در حالی که Grid برای چیدمان دوبعدی (سطر و ستون) استفاده می شود.
مولفه های فلکس باکس
هر رابط فلکس از دو جزء تشکیل می شود:
- فلکس کانتینر (Flex Container): المان والد که ویژگی
displayرویflexیاinline-flexتنظیم می شود. - فلکس آیتم ها (Flex Items): فرزندان مستقیم کانتینر که به صورت خودکار به آیتم های فلکس تبدیل می شوند.
یک فلکس کانتینر با سه آیتم
کد زیر یک کانتینر فلکس با سه آیتم نشان می دهد. پس زمینه کانتینر آبی است و هر آیتم فاصله و پدینگ مشخص دارد.
.container { display: flex; background-color: DodgerBlue; }
.container div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px; }نکته: برای ادامه یادگیری، بخش کانتینر فلکس را ببینید. همچنین برای مرور نقاط شکست واکنش گرا، به مثال های کوئری های رسانه ای سر بزنید.
فلکس باکس در عمل
با افزودن display: flex به والد، آیتم ها در یک خط قرار می گیرند و به سادگی با ویژگی های فلکس تراز می شوند. بنابراین، چیدمان پایه را سریع می سازید و بعد، با رسانه ها واکنش گرا می کنید.
منابع بیشتر
MDN: مفاهیم پایه فلکس باکس و MDN: ویژگی display توضیحات کامل تری ارائه می کنند.