FlexBox چیست؟ – توضیح مفاهیم پایه ای فلکس باکس

«CSS Flexbox» ماژولی قدرتمند است که به توسعه‌دهندگان کمک می‌کند که طرح‌بندی و هم‌ترازی عناصر را پروژه‌های وب به صورت کارآمد پیاده‌سازی کنند. «فلکس باکس» (Flexbox) در اصل راه‌حلی مناسب برای مدیریت مؤثر تخصیص فضا، تطبیق عناصر با اندازه‌های مختلف صفحه‌نمایش و بهینه‌سازی ابعاد عناصر ارائه می‌دهد. در این راهنمای جامع از «مجله فرادرس»، اصول CSS Flexbox به منظور درک بهتر طراحی‌های «واکنشگرا» (ریسپانسیو | Responsive) مورد بررسی قرار خواهد گرفت و کاربر درک عمیقی از هر ویژگی Flexbox و عملکرد آن به دست خواهد آورد. پس اگر مایل هستید که بدانید Flexbox چیست و چه کاربردی و به صورت عملی چگونه می‌توان از آن استفاده کرد، در ادامه این مطلب ما را همراهی کنید.

Flexbox چیست؟

Flexbox یا صفحه آرایی در اصل به عنوان نوعی ابزار یا ویژگی برای مرتب کردن و سازمان‌دهی عناصر در صفحه وب عمل می‌کند که در داخل «CSS» وجود دارد. به‌عبارتی‌دیگر فلکس باکس مانند نقشه‌ای است که به کاربر کمک خواهد کرد همه‌چیز را در جای درست خود قرار دهد. با Flexbox به راحتی می‌توان طرح‌بندی محتوای وب را طراحی و کنترل کرد. علاوه بر این برای ایجاد وب‌سایت‌هایی واکنشگرا یا ریسپانسیو با قابلیت نمایش در انواع صفحه‌های نمایش دیجیتالی بسیار مدلی مناسب است. دقیقاً Flexbox ابزاری به‌حساب می‌آید که وب‌سایت‌های طراحی شده را واکنش‌گرا و کاربرپسندتر می‌کند.

فیلم آموزش طراحی صفحات ریسپانسیو یا واکنشگرا با HTML و CSS در فرادرس

کلیک کنید

کاربرد Flexbox چیست؟

CSS Flexbox انقلابی در زمینه طراحی و صفحه آرایی صفحات وب ایجاد کرد. در گذشته، طراحی چیدمان‌های هوشمند با «CSS» کمی دردسرساز بود. توسعه‌دهندگان مجبور بودند با استفاده از راه‌حل‌های خلاقانه و شخصی صفحه آرایی یا طراحی واکنشگرا انجام دهند که اغلب منجر به مشکلات غیرمنتظره می‌شد. با این حال، معرفی مدل CSS Flexbox رویکرد تازه را به ارمغان آورد و «سینتکسی» (Syntax) تمیزتر و مدرن‌تر برای ساخت طرح‌بندی‌های هوشمند ارائه کرد. این مدل Flexbox نوعی رویکرد کارآمد برای ترتیب، تراز و توزیع فضا بین عناصر ارائه می‌دهد.

درک این نکته ضروری است که Flexbox فقط نوعی ویژگی منفرد CSS نیست بلکه نوعی ماژول کامل است به این معنی که برای درک کامل پتانسیل آن باید چیزهای بسیار زیادی یاد گرفت. در طول این مطلب، ما بر روی جنبه‌های کلیدی این فناوری در برنامه نویسی وب تمرکز خواهیم کرد که به کاربران قدرت می‌دهد تا از این ابزار قدرتمند به طور مؤثر استفاده کنند. حال که در رابطه با اینکه Flexbox چیست و چه کاربردی دارد مطالبی آموختیم. در ادامه نحوه کار این فناوری به صورت عملی موردبررسی قرار خواهد گرفت.

آموزش Flexbox

برای شروع کار با مدل Flexbox، باید نوعی «ظرف، محفظه یا کادر» (کانتینر | Container) انعطاف‌پذیر ایجاد شود. در زیر به صورت گام‌به‌گام با نوعی ساختار ساده HTML به تجزیه‌وتحلیل این مدل پرداخته شده که برای این هدف کد HTML زیر مفروض است:

1<ul> <!-- This is our parent element -->
2  <li></li> <!-- First child element -->
3  <li></li> <!-- Second child element -->
4  <li></li> <!-- Third child element -->
5</ul>

در کد بالا به عنصر ulبه عنوان والد و عناصر liبه عنوان فرزند در نظر گرفته شده‌اند. هنگام کار با مدل Flexbox از همین رویکرد باید پیروی کرد. برای ایجاد کانتینر فلکس، نوعی عنصر والد باید تعریف شود. در کد زیر نحوه تبدیل عنصر والد به کانتینر یا محفظه فلکس با استفاده از CSS آمده است.

1/* Make the parent element a flex container */
2ul {
3  display: flex; /* or inline-flex for the inline variation */
4}

علاوه بر این، می‌توان استایل و رنگ CSS را دست‌کاری کرد تا جذابیت بصری طرح‌بندی بهتر شود. کد زیر در این رابطه مهم است.

1/* Make the parent element a flex container */
2ul {
3  display: flex; /* or inline-flex for the inline variation */
4  list-style: none;
5}
6
7li {
8  width: 100px;
9  height: 100px;
10  background-color: #8cacea;
11  margin: 8px;
12}

خروجی کد بالا به صورت زیر است:

در کد بالا، لیست نامرتب ulبه طور خودکار به کانتینر فلکس تبدیل می‌شود و عناصر لیست liبه آیتم‌ها یا عناصر فلکس تبدیل خواهند شد. باید به این نکته توجه داشت که ویژگی‌های خاصی در ماژول Flexbox برای آیتم‌های Flex اعمال می‌شود و این ویژگی‌ها در حالی اعمال می‌شوند که مابقی عناصر در صفحه متناسب با کانتینر خود پیکربندی خواهند شد.

فیلم آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی در فرادرس

کلیک کنید

معماری فلکس باکس

به منظور درک بهتر این موضوع که Flexbox چیست، بررسی معماری و نحوه طرح‌بندی آن خالی از لطف نیست. طرح‌بندی یا معماری فلکس بر اساس اصول جهت‌های جریان فلکس عمل می‌کند که توجه به تصویر زیر در این رابطه اهمیت بسیار زیادی دارد:

در تصویر بالا، می‌توان مشاهده کرد که چیدمان عناصر داخل صفحه به صورت حالات زیر است:

• درون کانتینر یا همان ظرف
• در امتداد «محور متقاطع» (Cross Axis)
• از شروع متقاطع تا انتهای متقاطع
• در امتداد «محور اصلی» (Main Axis)
• از شروع محور اصلی تا انتهای محور اصلی

در اینجا خلاصه‌ای از اصطلاحات کلیدی برای درک بهتر طرح‌بندی انعطاف‌پذیر Flexbox آورده شده است:

• «جهت فلکس» (Flex-Direction): این ویژگی جهت قرار گرفتن عناصر فلکس در امتداد محور اصلی است.
• «محور اصلی» (main Axis): محور اصلی به عنوان جهت اولیه برای چیدمان عناصر فلکس عمل می‌کند و امکان دارد همیشه افقی نباشد. این محور در واقع محوری محسوب می‌شود که عناصر در امتداد آن سازمان‌دهی می‌شوند.
• «آغاز محور اصلی - پایان محور اصلی» (Main-Start/Main-End): این اصطلاحات به قرار دادن عناصر در کانتینر، از شروع محور اصلی تا انتهای محور اصلی اشاره دارد.
• «اندازه اصلی» (Main size): عرض یا ارتفاع آیتم بسته به بعد اصلی که اشغال می‌کند، اندازه اصلی آن در نظر گرفته می‌شود.
• «محور متقاطع» (Cross Axis): این محور عمود بر محور اصلی قرار دارد و جهت ثانویه برای چیدمان عناصر فراهم می‌کند.
• «شروع متقاطع - پایان متقاطع» (Cross-Start/Cross-End): خطوط منعطف برای تقسیمات درون کانتینر هستند که از سمت شروع متقاطع شروع می‌شوند و به سمت پایان متقاطع ختم خواهند شد.
• «اندازه متقاطع» (Cross Size): عرض یا ارتفاع آیتم فلکس به عنوان اندازه متقاطع آن تعریف می‌شود که با ابعادی که در جهت متقاطع اشغال می‌کند تعیین می‌شود.

این مفاهیم اساسی برای درک بهتر این موضوع که Flexbox چیست و چگونه عمل می‌کند بسیار ضروری است.

ویژگی های کانتینر فلس باکس

ویژگی‌های کانتینر فلکس نقشی اساسی در تعریف عنصر والد به منظور انتخاب یا ایجاد تک تک عناصر فرزند یا اقلام فلکس ایفا می‌کنند. در این بخش از آموزش فلکس باکس به بررسی همه این ویژگی‌ها خواهیم پرداخت. دقت به جزئیات این ویژگی‌ها به کاربر کمک می‌کند که درک خود را از Flexbox چیست ارتقا دهد.

فیلم آموزش طراحی واکنش گرا با گرید و فلکس باکس Grid و Flexbox در CSS در فرادرس

کلیک کنید

ویژگی display در فلکس باکس

این ویژگی سنگ بنای ایجاد کانتینر فلکس است و بسته به نیازهای چیدمان می‌توان آن را به صورت درون‌خطی یا بلوکی تنظیم کرد که قطعه کد زیر برای بیان این هدف است:

1.container {
2  display: flex; /* or inline-flex */
3}

ویژگی flex-direction

خاصیت flex-directionدر تعیین محور اصلی مؤثر است و در نتیجه جهتی را که اقلام فلکس در داخل ظرف چیده شده‌اند تعیین می‌کند. به طور کلی، Flexbox به عنوان نوعی مدل طرح‌بندی به صورت تک‌جهته عمل خواهد کرد و عناصر را در ردیف‌های افقی یا ستون‌های عمودی سازمان‌دهی خواهد کرد که کد زیر این موضوع را بیان می‌کند.

1.container {
2  flex-direction: row | row-reverse | column | column-reverse;
3}

شایان ذکر است که در دنیای فلکس باکس، به‌صراحت از اصطلاحات «افقی» و «عمودی» استفاده نمی‌شود و منظور از آن‌ها جهت پیش‌فرض محور اصلی برای حالت افقی و محور متقاطع برای حالت عمودی است. به‌طور پیش‌فرض، جهت روی «سطر» (Row) تنظیم می‌شود که این ویژگی عناصر را در امتداد محور اصلی تراز می‌کند. اگر این ویژگی ‌به «ستون» (Column) تغییر داده شود، عناصر فلکس در امتداد محور متقاطع تراز خواهند شد.

ویژگی flex-wrap در فلکس باکس

به‌طور پیش‌فرض، آیتم‌ها در فلکس باکس تلاش می‌کنند در خطی واحد قرار بگیرند. با این حال، این رفتار را می‌توان با استفاده از ویژگی flex-wrapتغییر داد که سه مقدار ممکن زیر را ارائه می‌دهد:

• «nowrap» (پیش‌فرض): عناصر فلکس در خطی واحد باقی می‌مانند.
• wrap: عناصر فلکس روی خطوط متعدد قرار داده می‌شوند و از بالا به پایین روی‌هم قرار می‌گیرند.
• wrap-reverse: اقلام فلکس روی خطوط متعددی قرار می‌گیرند و از پایین به بالا انباشته می‌شوند.

در زیر مثالی برای نشان دادن استفاده از wrap-reverseآورده شده است که به درک مفهوم نام‌برده بسیار کمک می‌کند.

1ul {
2  display: flex; /* or inline-flex */
3  list-style: none;
4  flex-wrap: wrap-reverse;
5}
6
7li {
8  width: 100px;
9  height: 100px;
10  background-color: #8cacea;
11  margin: 8px;
12}

خروجی مثال فوق به صورت زیر است:

در مثال فوق، لیست نامرتب ulبا استفاده از display: flexبه کانتینر فلکس تبدیل می‌شود و عناصر فلکس آن (عناصر لیست، li) پیکربندی شده‌اند تا به ترتیب معکوس قرار بگیرند و به طور مؤثر از پایین به بالا انباشته شوند.

ویژگی flex-flow در Flexbox چیست؟

ویژگی flex-flowبه‌عنوان نوعی خلاصه‌نویس یا کوتاه کننده سینتکس مناسب برای تعیین flex-directionو flex-wrapعمل می‌کند و به کاربر امکان می‌دهد محورهای اولیه و ثانویه کانتینر فلکس را تعریف کند. این ویژگی در اصل سینتکسی مختصر برای تعریف ویژگی‌های کانتینر است. مثال زیر این موضوع را بیان می‌کند:

1ul {
2    flex-flow: row wrap; /* Sets the direction to 'row' and enables item wrapping. */
3}

سایر ترکیبات ممکن دیگر برای این ویژگی به صورت موارد زیر هستند:

• «flex-flow: row nowrap» (جهت افقی بدون بسته‌بندی)
• «flex-flow: column wrap» (جهت عمودی با بسته‌بندی)
• «flex-flow: column nowrap» (جهت عمودی بدون بسته‌بندی)

این ترکیب‌ها به کاربر کمک می‌کنند تا چیدمان و رفتار کانتینر فلکس خود را بدون زحمت تنظیم کند.

ویژگی justify-content در فلکس باکس

در این بخش به بررسی اینکه ویژگی justify-contentدر Flexbox چیست خواهیم پرداخت. ویژگی justify-contentبرای تراز کردن یا مرتب‌سازی عناصر فلکس در امتداد محور اصلی استفاده می‌شود و واکنشگرا بودن را در صورت نیاز ارائه می‌دهد. این ویژگی می‌تواند هر یک از مقادیر زیر را داشته باشد:

• «flex-start» (پیش‌فرض): عناصر را در ابتدای جهت فلکس تراز می‌شوند.
• flex-end: عناصر در انتهای جهت فلکس تراز خواهند شد.
• start: عناصر در ابتدای جهت «حالت نوشتن» (Writing-Mode) تراز می شوند.
• center: عناصر در امتداد محور اصلی متمرکز می‌شوند.
• space-between: عناصر به طور مساوی توزیع و بین آن‌ها فاصله ایجاد می‌شود.
• space-around: عناصر به طور مساوی با فضای مساوی توزیع می‌شوند.

در زیر مثالی برای نشان دادن استفاده از justify-contentآورده شده است:

1ul {
2    justify-content: flex-start || flex-end || center || space-between || space-around;
3}

می‌توان مقدار مناسب را برای دستیابی به تراز دلخواه عناصر فلکس در امتداد محور اصلی در کانتینر فلکس انتخاب کرد.

ویژگی align-items در فلکس باکس

ویژگی align-itemsنقش مهمی در تعیین نحوه چیدمان عناصر فلکس بر روی محور متقاطع در کانتینر فلکس ایفا می‌کند. می‌توان این ویژگی را با هر یک از مقادیر زیر تنظیم کرد:

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

در زیر مثالی آورده شده است که استفاده از align-itemsرا با مقدار baselineنشان می‌دهد:

1ul {
2    display: flex;
3    border: 1px solid red;
4    padding: 0;
5    list-style: none;
6    justify-content: space-between;
7    align-items: baseline;
8    min-height: 50%;
9    background-color: #e8e8e9;
10}
11
12li {
13  width: 100px;
14  background-color: #8cacea;
15  margin: 8px;
16}
17
18/* Apply to all list items except the first one */
19li:not(:first-child) {
20    font-size: 2rem;
21}

خروجی مثال فوق به صورت زیر است:

در مثال فوق، ویژگی align-item: baseline آیتم‌های Flex را بر اساس خطوط پایه آن‌ها تراز کرده و طرحی متمایز در امتداد محور متقاطع در کانتینر فلکس ایجاد می‌کند.

ویژگی align-content در Flexbox چیست؟

یکی دیگر از ویژگی‌های فلکس باکس، align-contentاست که درک آن اهمیت بالایی برای کاربران دارد. در این بخش به بررسی اینکه align-contentدر Flexbox چیست خواهیم پرداخت. ویژگی align-contentدر کانتینر فلکس چندخطی برای مدیریت تراز عناصر در امتداد محور متقاطع استفاده می‌شود. این ویژگی هم همان مقادیر ویژگی align-items(به جزbaseline) را می‌پذیرید و تشریح این مقادیر به صورت زیر است:

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

در زیر مثالی برای نشان دادن استفاده از align-contentآورده شده که به درک بهتر این ویژگی در فلکس باکس کمک خواهد کرد:

1.container {
2  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | safe | unsafe;
3}

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

ویژگی های عناصر فلکس

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

ویژگی Order در عناصر Flexbox چیست؟

ویژگی «Order» به کاربر امکان می‌دهد عناصر فلکس را در طرح‌بندی مجدداً مرتب کند. این ویژگی در اصل آیتم فلکس را از موقعیت پیش‌فرض خود به مکان دیگری منتقل می‌کند. به‌طور پیش‌فرض، همه آیتم‌ها دارای ارزش Order یا سفارشی صفر هستند اما می‌توانند مقدار مثبت یا منفی را هم بگیرند. عناصر فلکس بر اساس مقادیر عددی ویژگی Order، از کمترین مقدار به بالاترین مقدار مرتب‌سازی می‌شوند.

فیلم آموزش طراحی واکنش گرا با گرید و فلکس باکس Grid و Flexbox در CSS در فرادرس

کلیک کنید

مثال زیر نحوه استفاده از این ویژگی را نشان می‌دهد:

1.item {
2  order: 5; /* Default is 0 */
3}

ویژگی‌ های flex-grow و flex-shrink

ویژگی‌های flex-growو flex-shrinkتعیین می‌کنند که آیتم فلکس هنگامی‌که فضای کافی موجود باشد چقدر می‌تواند منبسط (بزرگ) یا منقبض (کوچک) شود. این ویژگی‌ها مقادیری از صفر تا هر عدد مثبتی را می‌پذیرند. برای مثال، اگر همه آیتم‌های فلکس دارای flex-growبا مقدار ١ باشند، فضای باقی‌مانده به طور مساوی بین آن‌ها توزیع می‌شود. مقدار صفر اساساً به عنوان نوعی کلید turn-offبرای این ویژگی‌ها عمل می‌کند. مثال زیر نحوه استفاده از این ویژگی‌ها را در فلکس باکس نشان می‌دهد:

1.item {
2  flex-grow: 3; /* Default is 0 */
3}
4.item {
5  flex-shrink: 2; /* Default is 1 */
6}

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

ویژگی flex basis

ویژگی flex-basisاندازه اولیه عناصر فلکس را مشخص می‌کند که می‌تواند به عنوان طول (مثلاً ٢٠ درصد) یا با نوعی کلمه کلیدی مشخص شود. به عنوان مثال، کلمه کلیدی autoنشان می‌دهد که ویژگی عرض یا ارتفاع باید برای اندازه استفاده شود. مثال استفاده از flex-basisبرای تنظیم عرض ثابت برای نوعی عنصر فلکس به صورت زیر است:

1.item {
2  flex-basis: <length> | auto; /* Default is 'auto' */
3}

همچنین در زیر مثالی آورده شده که در آن عرض آیتم فلکس روی مقداری ثابت تنظیم شده است:

1ul {
2  display: flex;
3  border: 1px solid red;
4  padding: 0;
5  list-style: none;
6  background-color: #e8e8e9;
7}
8
9li {
10  flex-basis: auto; /* Default is 'auto' */
11  background-color: #8cacea;
12  margin: 8px;
13  min-height: 100px;
14  color: #fff;
15  padding: 4px;
16}

خروجی کد بالا به صورت زیر است:

در مثال بالا، از ویژگی flex-basisبرای تنظیم اندازه اولیه آیتم Flex استفاده شده و این ویژگی از داشتن عرض ثابت و حفظ انعطاف‌پذیری طرح‌بندی فلکس اطمینان حاصل می‌کند.

ویژگی Flex

ویژگی Flex به راحتی تنظیمات «flex-grow»، «flex-shrink» و «flex-basis» را در اعلانی واحد ترکیب می‌کند و در کل نوعی خلاصه‌نویسی سینتکسی محسوب می‌شود. مثال زیر نحوه استفاده از این ویژگی را نشان می‌دهد:

1li {
2  flex: 0 1 auto;
3}

مثال فوق خلاصه شده مثال زیر است:

1flex-grow: 0;
2flex-shrink: 1;
3flex-basis: auto;

ویژگی align-self

این ویژگی توانایی نادیده گرفتن تراز پیش‌فرض را برای آیتم فلکس خاصی فراهم می‌کند. این ویژگی در اصل به کاربر امکان می‌دهد موقعیت عنصر فلکس را در امتداد محور متقاطع تغییر دهد بدون اینکه روی عناصر همسایه آن تأثیری بگذارد. می‌توان از مقادیری مانند «auto»، «flex-start»، «flex-end»، «center»، «baseline» یا «stretch» برای آن استفاده کرد که مثال زیر نحوه استفاده از این ویژگی را نشان می‌دهد:

1li:first-of-type {
2  align-self: auto || flex-start || flex-end || center || baseline || stretch;
3}

با align-self، می‌توان دقیقاً هم ترازی آیتم‌های فلکس را در طرح‌بندی کنترل کرد.

مثالی عملی از Flexbox

در این بخش برای درک بهتر مفاهیم مقدماتی Flexbox به مثالی عینی و عملی روی خواهیم آورد. توجه به این مثال کاربردی در ما را از اینکه Flexbox چیست و چطور می‌توان آن را در پروژه‌های وب به کار برد، بسیار بالا می‌برد.

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

در راه‌اندازی اولیه این مثال، عناصر اصلی فلکس باکس یعنی کانتینر و عناصر آن موجود هستند. در زیر ساختار  اصلی این مثال با HTML آورده شده که از یک کانتینر با سه عنصر تشکیل شده است:

1<nav class="container">  
2  <div>Home</div>  
3  <div>Search</div>  
4  <div>Logout</div>  
5</nav>

قبل از اعمال طراحی Flexbox، عناصر divکد بالا به طور طبیعی در نوعی آرایش عمودی روی هم قرار می‌گیرند که خروجی آن به صورت زیر است:

در کد بالا برخی از استایل‌های اولیه برای عناصر اعمال شده است اما این تغییرات به Flexbox مربوط نمی‌شود. برای تبدیل آن به نوعی طرح بندی Flexbox، از ویژگی ساده CSS در کانتینر باید به صورت زیر استفاده کرد:

1.container {  
2    display: flex;  
3}

کد فوق در CSS  عناصر را به طور منظم در امتداد محور افقی با بهره‌گیری از قدرت Flexbox تراز می‌کند که خروجی آن به صورت زیر است:

مرتب سازی و تراز کردن عناصر در فلکس باکس

در این بخش از مبحث فلکس باکس، مرتب سازی و تراز کردن عناصر را برای مثال بالا مورد بررسی قرار خواهیم داد. «مرتب‌سازی عناصر» (justify-content ) «تراز کردن» (align-items ) دو ویژگی ضروری CSS هستند که نقشی محوری در چیدمان آیتم‌ها در کانتیر فلکس دارند. آن‌ها بر موقعیت عناصر در امتداد محور اصلی و محور متقاطع کنترل دارند. در مثال مد نظر ما همان‌طور که در تصویر زیر نمایش داده شده است، محور اصلی به صورت افقی بوده و محور متقاطع همان محور عمودی خواهد بود.

تمرکز این مثال روی justify-contentخواهد بود ولی با این حال align-itemsنیز به همان اندازه حائز اهمیت است. مثال زیر نحوه اعمال قوانین فلکس باکس را برای در مرکز قرار دادن همه عناصر را در امتداد محور اصلی با استفاده از justify-contentنشان می‌دهد:

1.container {  
2    display: flex;  
3    justify-content: center;  
4}

با استفاده از کد CSS بالا بدون زحمت و انجام عمل اضافی هم‌ترازی آیتم‌ها در امتداد محور اصلی صورت گرفته است و به صورت افقی در داخل کانتینر قرار گرفته‌اند. خروجی مثال فوق به صورت زیر است:

از طرف دیگر، می‌توان از justify-contentبا مقدار space-betweenبین عناصر فاصله ایجاد کرد که مثال زیر برای بیان این موضوع است:

1.container {  
2    display: flex;  
3    justify-content: space-between;  
4}

تنظیم space-betweenفضای مساوی را بین آیتم‌ها توزیع می‌کند که خروجی آن به صوررت زیر است:

در کلjustify-contentمقادیر مختلفی را می‌تواند به خود اختصاص دهد که خروجی برای هرکدام از آن‌ها متفاوت از دیگری است. این مقادیر به صورت موارد زیر هستند:

• flex-start (default) flex-end center space-between space-around space-evenly
• flex-end
• center
• space-between
• space-around
• space-evenly

برای درک بهتر اینکه Flexbox چیست و این ویژگی‌ها چطور اعمال می‌شوند بهتر است به عنوان نوعی تمرین مقادیر بالا را برای justify-contentامتحان کنید.

کنترل عنصری خاص در Flexbox

می‌توان کنترل دقیقی بر روی آیتم‌های مد نظر در فلکس باکس اعمال کرد. فرض کنید می‌خواهیم دو عنصر اول مثال قبل را در سمت چپ نگه‌داشته و عنصر یا دکمه logoutرا به سمت راست منتقل می‌کنیم. برای رسیدن به این هدف، می‌توان از تکنیک آشنای تنظیم ویژگی marginروی autoبرای آیتم مورد نظر استفاده به صورت زیر استفاده کرد:

1.logout {  
2    margin-left: auto;  
3}

خروجی کد بالا به صورت زیر است:

با اعمال این قانون CSS بر روی آیتم logout، به طور مؤثری این آیتم به سمت راست‌ترین موقعیت داخل کانتینر فلکس منتقل می‌شود و در عین حال موقعیت دو مورد اول را در سمت چپ حفظ می‌کنیم خواهد شد.

حال اگر هدف این باشد که هر دو عنصر searchو logoutبه سمت راست منتقل شوند، می‌توان به راحتی با اعمال ویژگی margin-leftدر مورد عنصر searchبه این هدف رسید. قطعه کد انجام این کار به صورت زیر است:

1.search {  
2    margin-left: auto;  
3}

قانون CSS فوق به طور مؤثر عنصر searchرا تا آنجا که ممکن است به سمت راست انتقال می‌دهد و در نتیجه باعث می‌شود که عنصر logoutبا آن در سمت راست تراز شود. خروجی کار بالا به صورت زیر است:

مثالی برای ویژگی های فلکس باکس

تا این مرحله از موضوع Flexbox چیست، ما در درجه اول با عناصری با عرض ثابت سروکار داشتیم. با این حال اگر کاربری اگر بخواهد عناصری رسپانسیو داشته باشد باید از ویژگی‌های فلکس استفاده کند. برای اینکه آیتم واکنشگرا باشد، می‌توان به راحتی ویژگی فلکس را برای همه آن‌ها با مقدار ١ به صورت زیر اعمال کرد:

1.container > div {  
2    flex: 1;  
3}

خروجی مثال بالا به صورت زیر است:

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

همان‌طور که مشاهده شد، اعمال ویژگی فلکس با مقدار ١ برای همه موارد، آن‌ها را به سمت اشغال کردن کل کانتینر فلکس تشویق می‌کند. با این حال، در بسیاری از سناریوها، ممکن است کاربری بخواهد آیتمی خاص عرض اضافی را به خود اختصاص دهد نه اینکه عرض به طور مساوی بین همه عناصر تقسیم شود. برای مثال برای موارد بالا، می‌توان عنصر searchرا برای مصرف تمام فضای اضافی موجود به صورت زیر تعیین کرد:

1.search {  
2    flex: 1;  
3}

خروجی کد فوق به صورت زیر است:

با اجرای قانون CSS بالا بر روی آیتم search، فضای اضافی در کانتینر گسترش میابد و این عنصر فضای مد نظر را اشغال می‌کند. این ویژگی فلکس باکس انعطاف‌پذیری برای کنترل توزیع فضا در صورت نیاز ارائه می‌دهد.

موضوعات پیشرفته در Flexbox

تا اینجا فهمیدیم که Flexbox چیست، معماری آن به صورت است و چه ویژگی‌هایی دارد. اکنون درک کاملی از نحوه استفاده از ویژگی‌های Flexbox برای طراحی و تراز کردن عناصر در پروژه‌های وب به دست آورده‌ایم. Flexbox به طور غیرقابل‌انکاری وظایف CSS را ساده می‌کند و به کاربر قدرت می‌دهد تا کنترل بیشتری روی پروژه‌های توسعه وب خود را در دست بگیرید.

فیلم مجموعه آموزش طراحی و برنامه ‌نویسی سایت – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

در مطلب فوق مفاهیم بنیادی Flexbox مورد بحث قرار گرفت اما هنوز چیزهای بیشتری در مورد Flexbox وجود دارد که کاربران حرفه‌ای ملزم به یادگیری آن‌ها هستند. در فهرست زیر چند موضوع پیشرفته آمده است که امکان دارد برای افراد علاقه‌مند جذاب باشند.

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

سخن پایانی

Flexbox یکی از ویژگی‌های جذاب و کاربردی CSS است که در برنامه نویسی وب و طراحی واکنش‌گرا از اهمیت بسیار بالایی برخوردار است. Flexbox در اصل نوعی ماژول یا ویژگی استاندارد محسوب می‌شود که به صورت استاندارد در CSS موجود است. با استفاده از Flexbox صفحه آرایی به صورت ریسپانسیو یا واکنشگرا بسیار ساده‌تر از روش‌های سنتی و معمولی است و این موجب صرفه‌جویی در هزینه و زمان کاربر می‌شود.

فیلم آموزش طراحی صفحات ریسپانسیو یا واکنشگرا با HTML و CSS در فرادرس

کلیک کنید

در مطلب فوق از مجله فرادرس توضیحات کاملی در مورد اینکه Flexbox چیست، چه کاربردی دارد، ویژگی‌های آن چه هستند و بسیاری از موارد دیگر ارائه شد. همچنین در مطلب فوق توضیحاتی در مورد ٢ تا از مهم‌ترین عناصر فلکس باکس، یعنی کانتینرها و عناصر داخل آن ارائه و ویژگی‌های آن‌ها نیز مورد بررسی قرار گرفت. در آخر با مثالی عملی و بحث در مورد مفاهیم پیشرفته بحث به پایان رسید.