صفحه آرایی Flexible Box

صفحه آرایی جعبه انعطاف پذیر (Flexible Box Layout) یا Flexbox یک مدل صفحه آرایی یک بعدی در CSS است که به شما امکان می‌دهد المنت ها را به شکلی انعطاف‌پذیر و پویا در صفحات وب خود بچینید. با استفاده از Flexbox می‌توانید ترتیب، صفحه آرایی، ترازبندی و توزیع فضا بین المنت ها را به طور کامل کنترل کنید.

برخی از امکانات فلکس باکس

• چیدن المنتها در یک ردیف کنار هم بدون نیاز به تعیین عرض مشخص و دقیق برای آنها: با استفاده از فلکس باکس می توانید المنتها را در یک ردیف کنار هم قرار دهید بدون اینکه نیاز باشد عرض مشخصی برای آنها تعیین کنید. فلکس باکس به طور خودکار عرض هر المنت را بر اساس فضای موجود تنظیم می کند.
• اگر برای المنتهایی که در یک خط قرار گرفتن جای کافی نباشد به راحتی المنت آخر به صورت خودکار در ردیف بعد قرار می گیرد: اگر تعداد المنتهایی که در یک خط قرار می گیرند بیشتر از فضای موجود باشد، فلکس باکس به طور خودکار المنت آخر را به ردیف بعد منتقل می کند. این امر باعث می شود که طراحی شما به طور خودکار با اندازه های مختلف صفحه نمایش سازگار شود.
• به سرعت می توان صفحه آرایی المنتهای کنار هم را از افقی به عمودی و بالعکس عوض کرد: با استفاده از فلکس باکس می توانید به سرعت صفحه آرایی المنتهای کنار هم را از افقی به عمودی و بالعکس تغییر دهید. این کار با تغییر یک کلمه در CSS انجام می شود.
• امکان تغییر ترتیب المنتها بدون دست کاری در HTML: با استفاده از فلکس باکس می توانید به راحتی ترتیب المنتها را بدون نیاز به تغییر کد HTML آنها تغییر دهید. این کار با استفاده از خواص CSS انجام می شود.
• تعیین کردن اندازه ی المنت نسبت به اندازه ی المنت نگهدارنده: با استفاده از فلکس باکس می توانید اندازه ی یک المنت را نسبت به اندازه ی المنت نگهدارنده آن تعیین کنید. این کار با استفاده از خواص CSS انجام می شود.

Flex Container و Flex Items

وقتی که یک المنت HTML را با ویژگی display: flex یا display: inline-flex استایل می‌دهید، این المنت به عنوان یک Flex Container شناخته می‌شود و فرزندان آن به عنوان Flex Items در نظر گرفته می‌شوند. به عبارت دیگر، هر المنتی که به عنوان یک محیط انعطاف‌پذیر (Flex Container) تعریف شود، فرزندان خود را با ویژگی display: flex یا display: inline-flex انعطاف‌پذیر می‌کند. این Flex Items می‌توانند در فضای انعطاف‌پذیر به صورت افقی یا عمودی چیده شوند و با استفاده از ویژگی‌های مختلف CSS Flexbox قابلیت کنترل و آراستن آن‌ها را دارید.

Flex Container

ویژگی display در CSS برای تعیین نحوه نمایش یک المنت استفاده می‌شود. در مورد Flexbox، وقتی این ویژگی به "flex" تنظیم می‌شود، المنت مورد نظر به عنوان یک Flex Container شناخته می‌شود و المنت ها داخلی آن به عنوان Flex Items مدیریت می‌شوند. به عبارت دیگر، با تنظیم display به flex، المنت مورد نظر به یک قابلیت صفحه آرایی فلکس تبدیل می‌شود، که این امکان را فراهم می‌کند که المنت ها داخلی را در یک نظام صفحه آرایی انعطاف‌پذیر و با توزیع خودکار قرار دهیم.

فرق اصلی بین display: flex و display: inline-flex در CSS این است که یکی از آنها (flex) به صورت بلوک عمل می‌کند و دیگری (inline-flex) به صورت خطی یا درون خط.

.my_container {
	/* display : flex(flexbox), inline-flex or ...*/
	display: flex;
}

ویژگی های Flex Container

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content
• gap

flex-direction

flex-direction یک ویژگی CSS Flexbox است که جهت صفحه آرایی فرزندان در یک Flex Container را تعیین می‌کند. این ویژگی می‌تواند چهار مقدار زیر را بپذیرد:

• row (پیش‌فرض): فرزندان به صورت افقی در یک خط قرار می‌گیرند. در این حالت، محور اصلی فرضیاً افقی است.
• row-reverse: فرزندان به صورت افقی در یک خط قرار می‌گیرند، اما ترتیب آن‌ها برعکس است.
• column: فرزندان به صورت عمودی در یک ستون قرار می‌گیرند. در این حالت، محور اصلی فرضیاً عمودی است.
• column-reverse: فرزندان به صورت عمودی در یک ستون قرار می‌گیرند، اما ترتیب آن‌ها برعکس است.

نکته بسیار مهم : حالت RTL (راست به چپ) و LTR (چپ به راست) در Flexbox به طور خودکار شناخته می‌شود. وقتی جهت نوشتار صفحه از LTR به RTL تغییر می‌کند، Flexbox نیز جهت صفحه آرایی المنت ها را به طور خودکار تغییر می‌دهد تا با جهت جدید صفحه سازگار شود. به عبارت دیگر، Flex Container و Flex Items خودشان جهت صفحه آرایی خود را مطابق با جهت نوشتار صفحه تغییر می‌دهند. بنابراین، شما نیازی به تعیین دستی flex-direction به صورت reverse در حالت RTL ندارید. Flexbox به طور خودکار ترتیب المنت ها را به درستی تغییر می‌دهد تا با جهت جدید صفحه هماهنگ شود.

flex-wrap

مقداردهی به ویژگی flex-wrap در CSS Flexbox به شما امکان می‌دهد تا تصمیم بگیرید که المنت ها Flex Container در صفحه چگونه قرار گیرند و چگونه وقتی فضای کافی برای جا نیست، چه کار کنند. این ویژگی می‌تواند به سه صورت زیر مقداردهی شود:

• nowrap (پیش‌فرض): در این حالت، المنت ها Flex Container از صفحه آرایی در یک خط یا ستون عبور می‌کنند بدون در نظر گرفتن اندازه و فضای موجود. به عبارت دیگر، المنت ها تماماً در یک خط یا ستون قرار می‌گیرند و به صورت پیوسته ادامه می‌یابند.
• wrap: در این حالت، المنت ها Flex Container زمانی که فضای کافی برای نمایش همه در یک خط یا ستون وجود ندارد، به صفحه آرایی در خطوط یا ستون‌های جداگانه تقسیم می‌شوند. به عبارت دیگر، المنت ها در صورت نیاز به خطوط یا ستون‌های جداگانه پرتاب می‌شوند.
• wrap-reverse: در این حالت، المنت ها Flex Container به نحوی در خطوط یا ستون‌های جداگانه قرار می‌گیرند که آخرین المنت از ردیف یا ستون اول شروع شود و سایر المنت ها به سمت اولین المنت حرکت کنند. به عبارت دیگر، جهت صفحه آرایی خطوط یا ستون‌ها برعکس از حالت wrap است.

flex-flow

flex-flow یک ویژگی اختصاری در CSS Flexbox است که به شما امکان می‌دهد جهت اصلی صفحه آرایی (flex-direction) و نحوه شکست خط (flex-wrap) را به طور همزمان تعیین کنید.

.container {
	display: flex;
	flex-flow: column wrap;
}

justify-content

ویژگی justify-content در CSS Flexbox به شما امکان می‌دهد تا مکانیک صفحه آرایی افقی المنت ها Flex Container را کنترل کنید. این ویژگی می‌تواند به چندین روش مقداردهی شود که هر کدام موقعیت‌های مختلف را برای المنت ها فلکس ایجاد می‌کنند:

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

align-items

align-items یک ویژگی در CSS Flexbox است که نحوه ترازبندی آیتم‌های flex را در امتداد محور فرعی (محوری که عمود بر محور اصلی صفحه آرایی است) تعیین می‌کند.

• flex-start: آیتم‌ها در لبه ابتدایی محور فرعی تراز می‌شوند (پیش فرض).
• flex-end: آیتم‌ها در لبه انتهایی محور فرعی تراز می‌شوند.
• center: آیتم‌ها در مرکز محور فرعی تراز می‌شوند.
• baseline: آیتم‌ها بر اساس خط پایه تراز می‌شوند.
• stretch: آیتم‌ها به گونه‌ای کشیده می‌شوند که تمام فضای موجود در امتداد محور فرعی را پر کنند.

align-content

align-content یک ویژگی در CSS Flexbox است که توزیع خطوطِ flex را در امتداد محور فرعی (محوری که عمود بر محور اصلی صفحه آرایی است) کنترل می‌کند. این ویژگی زمانی کاربرد دارد که از flex-wrap با مقادیر wrap یا wrap-reverse استفاده شده باشد، یعنی زمانی که خطوطِ flex مجاز به شکستن و قرارگیری در چندین ردیف هستند.

• flex-start: خطوطِ flex در ابتدای محور فرعی قرار می‌گیرند (پیش فرض).
• flex-end: خطوطِ flex در انتهای محور فرعی قرار می‌گیرند.
• center: خطوطِ flex در مرکز محور فرعی تراز می‌شوند.
• space-between: خطوطِ flex به طور مساوی در کل فضای موجود در امتداد محور فرعی توزیع می‌شوند، به گونه‌ای که اولین خط در ابتدای محور و آخرین خط در انتهای محور قرار می‌گیرد.
• space-around: خطوطِ flex به طور مساوی در کل فضای موجود در امتداد محور فرعی توزیع می‌شوند، با این تفاوت که فضایی اضافی در ابتدای و انتهای ظرف درنظر گرفته می‌شود.
• stretch: اگر ارتفاع خطوطِ flex مشخص نشده باشد، آن‌ها به طور یکنواخت کشیده می‌شوند تا کل فضای موجود در امتداد محور فرعی را پر کنند.

gap

gap یک ویژگی اختصاصی در CSS Flexbox است که فاصله بین Flex Items را در داخل یک Flex Container تعیین می‌کند. این خاصیت به شما امکان می‌دهد تا به طور کلی فضای خالی بین Flex Items را در محور اصلی (flex-direction: row) یا محور فرعی (flex-direction: column) کنترل کنید. ([محورهای اصلی و فرعی][#main-and-cross-axis])

کاربرد: با استفاده از gap می‌توان به طور دقیق‌تر فضای خالی بین Flex Items را کنترل کرد. این خاصیت برای ایجاد چینش‌های منعطف و منظم، به خصوص زمانی که با Flex Items با اندازه‌های مختلف کار می‌کنید، بسیار کاربردی است.

مقادیر مجاز:

• عدد: هر عدد غیرمنفی می‌تواند برای gap استفاده شود. این عدد فاصله بین هر دو Flex Item را در واحدهای پیکسل (px) مشخص می‌کند.
• کلمه کلیدی auto: این مقدار به طور خودکار فاصله بین Flex Items را بر اساس نیازهای صفحه آرایی و فضای موجود در Flex Container تنظیم می‌کند.

Flex Items

Flex Items به المنت هایی گفته می‌شود که داخل یک Flex Container قرار می‌گیرند. این المنت ها با توجه به قواعد Flexbox چیده و تراز می‌شوند.

مقایسه با Flex Container:

• Flex Items المنت هایی هستند که داخل یک Flex Container قرار می‌گیرند.
• Flex Container المانی است که Flex Items را در خود جای می‌دهد و نحوه صفحه آرایی و ترازبندی آنها را کنترل می‌کند.

ویژگی های Flex Items

• order: تعیین ترتیب نمایش المنت ها داخلی فلکس.
• flex-grow: تعیین نسبت توسعه المنت ها داخلی فلکس به یکدیگر.
• flex-shrink: تعیین نسبت کاهش المنت ها داخلی فلکس به یکدیگر.
• flex-basis: تعیین اندازه پایه المنت ها داخلی فلکس قبل از توسعه یا کاهش.
• flex: مختصر برای تعیین flex-grow، flex-shrink و flex-basis.
• align-self: تعیین تراز المنت خاص در امتداد محور عرضی، جدا از تراز معمولی تعیین شده توسط align-items.

order

order یک ویژگی اختصاصی در CSS Flexbox است که ترتیب نمایش Flex Items را در داخل یک Flex Container تعیین می‌کند.

کاربرد: با استفاده از order می‌توان ترتیب نمایش Flex Items را به صورت دلخواه تغییر داد، بدون اینکه نیاز به تغییر ترتیب آنها در HTML باشد. این خاصیت برای ایجاد چینش‌های پیچیده و انعطاف‌پذیر بسیار مفید است.

مقادیر مجاز :
عدد صحیح: هر عدد صحیحی می‌تواند برای order استفاده شود.
مقادیر پیش‌فرض:

• اگر order برای هیچ Flex Itemی تنظیم نشده باشد، ترتیب نمایش آنها بر اساس ترتیب ظاهر شدنشان در HTML خواهد بود.
• اولین Flex Item دارای order 0 خواهد بود.
• Flex Itemهایی که order یکسانی دارند، بر اساس ترتیب ظاهر شدنشان در HTML مرتب می‌شوند.

flex-grow

flex-grow یک ویژگی اختصاصی در CSS Flexbox است که مشخص می‌کند یک Flex Item نسبت به سایر Flex Items داخل یک Flex Container چقدر می‌تواند رشد کند (یعنی چقدر از فضای باقیمانده را اشغال کند).

کاربرد: با استفاده از flex-grow می‌توان کنترل کرد که در صورت وجود فضای خالی در یک Flex Container، چقدر از آن فضا به هر Flex Item اختصاص داده شود. این خاصیت برای ایجاد چینش‌های منعطف و توزیع متناسب فضای خالی بین Flex Items بسیار کاربردی است.

مقادیر مجاز :
عدد غیرمنفی: هر عدد غیرمنفی (از جمله ۰) می‌تواند برای flex-grow استفاده شود. مقادیر پیش‌فرض:

• اگر flex-grow برای هیچ Flex Itemی تنظیم نشده باشد، مقدار پیش‌فرض آن ۰ خواهد بود.
• هرچه مقدار flex-grow برای یک Flex Item بزرگتر باشد، آن Flex Item نسبت به سایرین فضای بیشتری را اشغال خواهد کرد.

flex-shrink

flex-shrink یک ویژگی اختصاصی در CSS Flexbox است که مشخص می‌کند یک Flex Item نسبت به سایر Flex Items داخل یک Flex Container چقدر می‌تواند کوچک شود (یعنی چقدر از فضای اشغال‌شده‌اش را می‌توان کم کرد).

کاربرد: با استفاده از flex-shrink می‌توان کنترل کرد که در صورت کمبود فضا در یک Flex Container، کدام Flex Itemها و به چه میزان کوچک شوند تا همه Flex Items بتوانند در یک ردیف قرار بگیرند و از شکستن خطوط (wrap) جلوگیری شود. این خاصیت برای ایجاد چینش‌های فشرده و مدیریت بهینه‌ی فضا در شرایط کمبود جا کاربردی است.

مقادیر مجاز :
عدد غیرمنفی: هر عدد غیرمنفی (از جمله ۰) می‌تواند برای flex-shrink استفاده شود. مقادیر پیش‌فرض:

• اگر flex-shrink برای هیچ Flex Itemی تنظیم نشده باشد، مقدار پیش‌فرض آن ۱ خواهد بود.
• هرچه مقدار flex-shrink برای یک Flex Item بزرگتر باشد، آن Flex Item در صورت کمبود فضا نسبت به سایرین بیشتر کوچک خواهد شد.

flex-basis

flex-basis یک ویژگی اختصاصی در CSS Flexbox است که اندازه اولیه یک Flex Item را تعیین می‌کند. این مقدار بر اساس محتویٰ Flex Item یا واحدی که برای آن تعریف شده است (مثلاً پیکسل، درصد) در نظر گرفته می‌شود.

کاربرد: با استفاده از flex-basis می‌توان اندازه اولیه Flex Items را به صورت دلخواه تنظیم کرد و سپس از سایر ویژگی های اختصاصی Flexbox مانند flex-grow و flex-shrink برای کنترل رفتار آنها در صورت وجود فضای خالی یا کمبود فضا استفاده کرد.

مقادیر مجاز :
عدد (مثلاً پیکسل)، درصد، یا کلمه کلیدی auto: هر عدد (مثلاً پیکسل)، درصد، یا کلمه کلیدی auto می‌تواند برای flex-basis استفاده شود. مقادیر پیش‌فرض:

• اگر flex-basis برای هیچ Flex Itemی تنظیم نشده باشد، مقدار پیش‌فرض آن auto خواهد بود.
• مقدار auto باعث می‌شود اندازه اولیه Flex Item بر اساس محتوای آن تعیین شود.

flex

flex یک ویژگی اختصاصی مخفف در CSS Flexbox است که به صورت ترکیبی سه خاصیت flex-grow، flex-shrink و flex-basis را در یکجا مشخص می‌کند. این خاصیت باعث ساده سازی (simplification) تنظیمات مربوط به نحوه توزیع فضا و رفتار Flex Items در داخل یک Flex Container می‌شود.

کاربرد: با استفاده از flex می‌توان به صورت خلاصه نحوه توزیع فضا و رفتار Flex Items را در یک Flex Container تعیین کرد. این خاصیت برای سناریوهایی که می‌خواهیم هر سه خاصیت flex-grow، flex-shrink و flex-basis را با هم تنظیم کنیم، بسیار کاربردی است.

مقادیر مجاز :
<nonnegative-number> <nonnegative-number> <flex-basis>: <nonnegative-number> : عدد غیرمنفی برای flex-grow و flex-shrink <flex-basis> : هر مقداری که برای flex-basis مجاز است (عدد، درصد، یا کلمه کلیدی auto) مقادیر پیش‌فرض:

• اگر flex برای هیچ Flex Itemی تنظیم نشده باشد، مقدار پیش‌فرض آن 0 1 auto خواهد بود (معادل flex-grow: 0; flex-shrink: 1; flex-basis: auto;).

align-self

align-self یک ویژگی اختصاصی در CSS Flexbox است که تراز عمودی یک Flex Item را نسبت به خط پایه (baseline) یا لبه‌های container در جهت عمود بر جهت اصلی چینش (cross axis) تعیین می‌کند.

کاربرد: با استفاده از align-self می‌توان کنترل بیشتری بر تراز عمودی Flex Items داشته باشیم. این خاصیت برای سناریوهایی که می‌خواهیم ترازبندی خاصی را برای تک تک Flex Items ایجاد کنیم، کاربردی است.

مقادیر مجاز :

• auto (پیش‌فرض): ترازبندی بر اساس سایر ویژگی های اختصاصی Flexbox و مقادیر پیش‌فرض آنها انجام می‌شود.
• flex-start: لبه بالایی Flex Item با لبه ابتدایی container تراز می‌شود.
• flex-end: لبه پایینی Flex Item با لبه انتهایی container تراز می‌شود.
• center: Flex Item در مرکز خط فرضی عمود بر جهت اصلی چینش (محور عمودی برای صفحه آرایی ردیفی و محور افقی برای صفحه آرایی ستونی) تراز می‌شود.
• baseline: لبه پایینی Flex Item با خط پایه محتویٰ آن تراز می‌شود.
• stretch (فقط برای container های تک خطی): Flex Item کل ارتفاع container را اشغال می‌کند.

مقادیر inheritance و initial نیز قابل استفاده هستند.

محورهای اصلی (Main Axis) و فرعی (Cross Axis)

در فلکس باکس، دو محور اصلی وجود دارد:

محور اصلی (Main Axis): محوری که Flex Items در امتداد آن چیده می‌شوند. جهت این محور توسط ویژگی اختصاصی flex-direction تعیین می‌شود. دو مقدار پیش‌فرض برای این خاصیت وجود دارد:

flex-direction: row (پیش‌فرض): Flex Items به صورت افقی (از چپ به راست) در یک ردیف چیده می‌شوند. flex-direction: column: Flex Items به صورت عمودی (از بالا به پایین) در یک ستون چیده می‌شوند.

محور فرعی (Cross Axis): محوری که عمود بر محور اصلی است. Flex Items در این محور تراز (align) می‌شوند. ترازبندی در محور فرعی توسط ویژگی های اختصاصی align-items و align-self کنترل می‌شود.

تاثیر flex-direction بر justify-content و align-items:

justify-content: این خاصیت توزیع فضای خالی بین Flex Items را در محور اصلی کنترل می‌کند. مقادیر مختلف justify-content برای flex-direction: row و flex-direction: column معانی متفاوتی دارند.

به عنوان مثال، justify-space-between در flex-direction: row باعث می‌شود Flex Items با فاصله مساوی از لبه‌های container تراز شوند، در حالی که در flex-direction: column باعث می‌شود Flex Items با فاصله مساوی از یکدیگر تراز شوند.

align-items: این خاصیت ترازبندی Flex Items را در محور فرعی نسبت به لبه‌های container کنترل می‌کند.

به عنوان مثال، align-items: center در flex-direction: row باعث می‌شود Flex Items در مرکز خط عمودی container تراز شوند، در حالی که در flex-direction: column باعث می‌شود Flex Items در مرکز خط افقی container تراز شوند.

معاوضه شدن justify-content و align-items

برخی افراد تصور می‌کنند که با تغییر flex-direction جای justify-content و align-items عوض می‌شود. این تصور غلط است.

justify-content همیشه توزیع فضای خالی را در محور اصلی کنترل می‌کند، صرف نظر از جهت آن محور. align-items همیشه ترازبندی Flex Items را در محور فرعی کنترل می‌کند، صرف نظر از جهت آن محور.