آموزش Flexbox - قسمت دوم
اگر هنوز قسمت اول آموزش Flexbox را نخوانده‌اید ، قبل از خواندن ادامه متن این پست را مطالعه کنید.
همانطور که به یاد دارید در جلسه قبل ، ابتدا به معرفی Flexbox پرداختیم و سپس با خاصیت‌های flex و flex-direction آشنا شدیم. در این پست تعداد بیشتری از خاصیت‌های flexbox را آموزش خواهیم داد. در انتهای این پست قادر هستیم المان‌های خود را به کمک قابلیت Floxbox به هر شکل دلخواه در صفحه قرار دهیم.
flex-wrap
در حالت عادی همه flex-item ها در یک خط قرار میگیرند. به کمک خاصیت flex-wrap شما می‌توانید مشخص کنید که flex-item ها در چندین خط قرار بگیرند.
همانطور که در تصویر بالا مشاهده کردید در حالت پیشفرض همه Flex itemها در یک خط قرار میگیرند. در این حالت width آیتم‌ها در نظر گرفته نمی‌شود و آیتم ها تا حدی که در یک خط قرار بگیرند کوچک میشوند (اسلاید ۱) .
اما در صورتی که بخواهیم فلکس آیتم ها در چندین خط نمایش داده شوند می‌توانیم از خاصیت wrap استفاده کنیم. در این حالت Flex itemها به نسبت عرض خود در صفحه جایگذاری میشوند و در صورت نیاز تعدادی از آنها به خط بعدی می‌روند (اسلاید ۳) .
به هر کدام از خط‌هایی که در این روش ایجاد میشوند اصطلاحا flex-line می‌گویند(اسلاید ۴) .
مقادیری که می‌توانید برای flex-wrap استفاده کنید به شرح زیر است:
.container {
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
}
- nowrap : این مقدار پیشفرض است و تمامی آیتم ها در یک خط و در کنار هم قرار میگیرند.
- wrap : با استفاده از این مقدار آیتم ها در چند خط قرار میگیرند (اگر صفحه شما RTL باشد از راست به چپ و اگر صفحه LTR باشد از چپ به راست قرار میگیرند) .
- wrap-reverse : این مقدار شبیه به wrap است اما به جای اینکه چیدمان آیتم ها از بالا به پایین باشد از پایین به بالا است.
شما می‌توانید پیش نمایش هر ۳ مقدار را از اینجا مشاهده کنید:
See the Pen flex-Wrap by Ali Haddadkar (@ali_haddadkar) on CodePen.
flex-flow
مطمئینا با قابلیت های ساده نویسی در CSS آشنا هستید. اکنون به کمک flex-flow شما می‌توانید مقادیری که برای flex-direction و flex-wrap در نظر دارید را در یک خاصیت بنویسید.
به مثال زیر دقت کنید:
.container {
flex-direction:row;
flex-wrap: wrap;
}
یا
.container {
flex-flow: row wrap;
}
محور اصلی و محور فرعی
قبل از ادامه توضیح خاصیت‌های Flexbox می‌خواهیم ۲ عنوان مهم در مورد فلکس باکس را شرح دهیم:
- محور اصلی: محور اصلی که اصطلاحا Main نامیده میشود از محدوده سمت چپ تا سمت راست Flexbox است. به بیان ساده‌تر می‌توان گفت محور اصلی هم اندازه Width است.
- محور فرعی: محور فرعی که اصطلاحا Cross نامیده میشود از محدوده بالا تا پایین Flexbox است. به بیان ساده‌تر می‌توان گفت محور اصلی هم اندازه Height است.
در شکل زیر این ۲ مفهوم و چندین مفهوم دیگر از قبیل Main axis و Cross axis به ساده‌ترین شکل توضیح داده شده است.
در آخر به این نکته توجه داشته باشید که اگر خاصیت flex-direction را برابر با column و یا column-reverse قرار داده باشید جای محور اصلی (Main) و فرعی (Cross) برعکس خواهد شد.
justify-content
با استفاده از این خاصیت می‌توانید نحوه چیدمان آیتم‌ها بر روی محور اصلی را تعیین کنید (به یاد داشته باشید همانطور که گفتیم اگر خاصیت flex-direction برابر column یا column-reverse باشد، محور اصلی عمودی خواهد بود) .
.container {
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
}
- flex-start : آیتم‌ها از ابتدای flex-line ها چیده میشوند.
- flex-end : آیتم‌ها از انتهای flex-line ها چیده میشوند.
- center :آیتم‌ها از وسط flex-line ها چیده میشوند.
- space-between :آیتم اول در ابتدا و آیتم آخر در انتهای flex line قرار می گیرند و بقیه آیتم ها در بین آنها با یک فاصله ی برابر قرار میگیرند.
- space-around :آیتم ها با فضای برابر در کنار یکدیگر قرار میگیرند.
پیش نمایش این خاصیت:
See the Pen justify-content by Ali Haddadkar (@ali_haddadkar) on CodePen.
align-items
این خاصیت نحوه چینش Flex itemها را در محور Cross مشخص می کند. این خاصیت مانند justify-content است تنها تفاوت آنها در مقادیرشان است.
.container {
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;
}
- flex-start : آیتم‌ها از نقطه ابتدایی محور cross (محور عمودی) چیده میشوند.
- flex-end :آیتم‌ها از نقطه انتهایی محور cross (محور عمودی) چیده میشوند.
- center : آیتم‌ها در وسط محور Cross (محور عمودی) چیده میشوند.
- Stretch : در صورتی که ارتفاع آیتم‌ها مشخص نشده باشد، آیتم ها کشیده میشوند و Flex line را پر میکنند.این مقدار پیشفرض است.
- Baseline : این مقدار یکی از جالب‌ترین خصوصیات Flexbox است. با انتخاب این مقدار، آیتم ها بر اساس Baselineشان هم‌تراز میشوند. در عکس بالا این مورد به خوبی نشان داده شده است. در آن عکس Baseline آیتم ها پایین کلمه Themeyab است و آیتم ها بر اساس آن خط با هم‌دیگر تراز شده اند.
پیش نمایش این خاصیت:
See the Pen align-items by Ali Haddadkar (@ali_haddadkar) on CodePen.
همانطور که در توضیحات ذکر شد ، مقدار Stretch در صورتی آیتم‌ها را به شکل کشیده در می‌آورد که Height نداشته باشند. در این مثال هم دیدید که وقتی حالت Stretch را انتخاب کردید flex-item 4 کشیده نشد. زیرا از طریق CSS به این آیتم ارتفاع داده ایم. اما flex-item 2 که ارتفاع نداشت کشیده شد.
align-content
فرض کنید که ارتفاع flex-container بیشتر از فضایی است که flex-lineها گرفته اند و اصطلاحا مقداری فضای خالی در flex-container وجود دارد. به کمک خاصیت align-content شما می‌توانید محل قرارگیری این flex-line ها را مشخص کنید که از نظر محور عمودی در کجا قرار گیرند.
مقادیری که align-content به جز یک مورد می‌گیرد دقیقا همان مقادیر justify-content است که در همین پست توضیح دادیم.
.container {
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around
align-content: stretch;
}
- flex-start : با این مقدارflex-line ها در ابتدای flex-container جمع میشوند.
- flex-end :با این مقدارflex-line ها در انتهای flex-container جمع میشوند
- center : با این مقدار flex-lineها در وسط flex-container جمع میشوند.
- space-between : با این مقدار فضای خالی به طور مساوی بینflex-line ها توزیع میشود. خط اول در ابتدا و خط آخر در انتهای flex container قرار میگیرند و بقیه خطوط در بین این ۲ خطر قرار میگیرند.
- space-around : فضای خالی به طور مساوی بینflex-line ها تقسیم میشود.
- stretch : با این مقدارflex-line ها کشیده میشوند و فضای خالی را پر می کنند (این مقدار پیشفرض است).
See the Pen align-content by Ali Haddadkar (@ali_haddadkar) on CodePen.
خصوصیات مربوط به flex-contianer در اینجا به اتمام رسید و از جلسه آینده بحث را پیرامون خصوصیات flex-item ادامه خواهیم داد.
شما می‌توانید نظرات ، انتقادات و پیشنهادات خود را درباره این آموزش و سایر آموزش‌ها از طریق بخش نظرات اعلام کنید.
به روز رسانی
جلسه بعدی آموزش Flexbox در سایت قرار گرفت. شما می‌توانید قسمت سوم آموزش Flexbox را از اینجا مطالعه کنید.
