در بخش اول آموزش فلکس باکس (Flexbox) با مفاهیم پایه و همچنین ویژگی های اصلی flexbox را یاد گرفتیم. در این بخش با ترتیب بندی عناصر و انعطاف پذیری آن ادامه می دهیم
ماژول Flexible Box یا همان Flexbox یک مدل جدید طرح بندی برای ساخت رابط کاربری انعطاف پذیر است.
تغییر ترتیب عنصرهای داخلی
توجه داشته باشید که ویژگی هایی که از این به بعد بررسی می کنیم مربوط به عنصرهای داخلی خواهند بود. اولین ویژگی order می باشد که به وسیله آن می توان ترتیب نمایش عنصرهای داخلی را بدون تغییر در ساختار HTML عوض کرد.
مقداری که به این ویژگی انتصاب داده می شود یک عدد صحیح است.
بزرگترین عدد حاکی آخرین عنصر از نظر ترتیب است. مقدار پیشفرض برای تمام عنصرها عدد ۰ است. (مثال زیر صفحه آرایی چپ به راست دارد)
ما در مثالمان می خواهیم عنصری که از نظر ترتیب HTML دوم است را به عنوان آخرین عنصر نمایش دهیم پس داریم:
|
1 2 3 4 |
.second { order: 1; } |
از آنجایی که order برای تمام عنصرها بصورت پیش فرض ۰ است, در نتیجه کافی است برای این عنصر, یک order با عددی بزرگرتر از ۰ انتخاب کنیم.
انعطاف پذیر سازی عنصرهای داخلی
یکی از اصلی ترین و ارزشمندترین امکاناتی که فلکس باکس در اختیار ما قرار می دهد قابلیت انعطاف پذیر بودن اندازه عنصرهای داخلی نسبت به فضای عنصر نگهدارنده است.
که اگر جهت عنصر نگهدارنده row باشد عرض انعطاف پذیر می شود و اگر جهتش column باشد ارتفاع انعطاف پذیر است.
برای رسیدن به این هدف باید با سه ویژگی flex-grow وflex-shrink و flex-basis آشنا بشویم.
flex-grow
این عامل یک عدد صحیح می باشد که نشان می دهد یک عنصر داخلی چند برابر عنصرهای دیگر از فضای عنصر نگهدارنده سهم می برد.
مثلا اگر همه عنصرها مقدار ۱ را داشته باشند فضای عنصر نگهدارنده به صورت برابر بین عنصرهای داخلی تقسیم می شود اما اگر یکی از آنها مقدار ۲ را بگیرد سهم آن دو برابر سهم دیگر عنصرهای داخلی می باشد.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.first { flex-grow: 1; } .second { flex-grow: 2; } .third { flex-grow: 1; } |
flex-basis
می توان به هر عنصر یک مقدار flex-basis به صورت زیر اختصاص داد
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.first { flex-grow: 1; flex-basis: 200px; } .second { flex-grow: 2; flex-basis: 300px; } .third { flex-grow: 1; flex-basis: 250px; } |
اول از همه این مقدار با توجه به جهت عنصر نگهدارنده به عرض یا ارتقاع به صورت خودکار تعلق میگیرد یعنی اگر جهت عنصر نگهدارنده row باشد این مقدار به عرض عنصرهای داخلی داده می شود و اگر column باشد به ارتقاع عنصرهای داخلی تعلق میگیرد.
سپس هر مقدار که از فضای عنصر نگهدارنده باقی بماند بین عنصرهای داخلی با توجه به flex-growی آنها تقسیم می شود تا در نهایت عنصرهای داخلی به عرض یا ارتفاع واقعی خود دست پیدا کنند.
در مثال ما که جهت هم افقی است مقادیر برای عرض عنصرهای داخلی تعیین می شوند پس برای عنصر اول ۲۰۰px برای عنصر دوم ۳۰۰px و برای عنصر سوم ۲۵۰px ثبت می شود که جمع این سه مقدار ۷۵۰px می باشد
حال با توجه به اینکه عرض عنصر نگهدارنده در مثال ما ۹۵۰px است پس هنوز مقدار ۲۰۰px از عنصر نگهدارنده باقی مانده است که باید بین عنصرهای داخلی تقسیم شود.
با توجه به اینکه flex-grow برای عنصر اول و سوم ۱ است به هر کدام ۵۰px فضای بیشتر داده می شود و چون flex-grow برای عنصر دوم ۲ است ۱۰۰px فضای بیشتر به این عنصر تعلق می گیرد.
در آخر عرض نهایی عنصر اول ۲۵۰px عنصر دوم ۴۰۰px و عنصر سوم ۳۰۰px می شود که جمع نهایی آنها ۹۵۰px است که برابر با اندازه عنصر نگهدارنده می شود.
flex-shrink
این عامل به ندرت مورد استقاده قرار می گیرد. کاربرد آن زمانی است که جمع اندازه های عنصرهای داخلی بیشتر از عنصر نگهدارنده شود و سرریز داشته باشیم.
حال باید عنصرهای داخلی کمی آب شوند (shrink) تا از سرریز جلو گیری شود که این کم کردن اندازه عنصرهای داخلی با توجه به این عامل انجام می گیرد مثال زیر دا در نظر بگیرید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.first { flex-grow: 1; flex-basis: 400px; flex-shrink: 1; } .second { flex-grow: 2; flex-basis: 600px; flex-shrink: 3; } .third { flex-grow: 1; flex-basis: 400px; flex-shrink: 2; } |
فرض کنید اندازه عنصر نگهدارنده ما ۱۱۰۰px باشد همان طور که می بینید جمع عنصرهای داخلی ۱۴۰۰px است پس ما ۳۰۰px سرریز خواهیم داشت.
حال از اندازه هر عنصر با توجه به flex-shrink آن مقداری کم می شود.
- در عنصر اول ۱/۶ از ۳۰۰px یعنی ۵۰px کاهش خواهیم داشت که اندازه نهایی عنصر ۲۵۰px می شود.
- در عنصر دوم ۳/۶ از ۳۰۰px یعنی ۱۵۰px کاهش خواهیم داشت که اندازه نهایی عنصر ۴۵۰px می شود.
- در عنصر سوم ۲/۶ از ۳۰۰px یعنی ۱۰۰px کاهش خواهیم داشت که اندازه نهایی عنصر ۳۰۰px می شود.
با این سه عامل که تا الان فرا گرفتیم می توانیم عنصرهای داخلی به طور کامل انعطاف پذیر طراحی کنیم و این کار واقعا ارزشمند و کاربردی است.
توجه داشته باشید که می توان این سه ویژگی را در یک ویژگی به نام flex به صورت کوتاه شده بیان کرد. به صورت زیر: flex: grow shrink basis
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.first { flex: 1 1 400px; } .second { flex: 2 3 600px; } .third { flex: 1 2 400px; } |
توجه داشته باشید چون می خواهیم عنصرها در یک ردیف بمانند flex-wrap: nowrap می باشد.
ترازسازی تک عنصر با align-self
در بالا ویژگی مورد بررسی قرار گرفت یه نام align-items که وظیفه ترازسازی تمام عنصرهای داخلی را به عهده داشت و این ویژگی به عنصر نگهدارنده تعلق داشت. حال اگر بخواهیم تنها روی یک عنصر ترازسازی را انجام دهیم چه؟
برای این کار از ویژگی align-self استفاده می کنیم که این ویژگی به عنصر داخلی تعلق می گیرد و مقادیر آن شبیه مقادیر align-items است.
|
1 2 3 4 5 6 7 8 9 |
.flex-container { align-items: flex-start; } .second { align-self: flex-end; } |
بازی آنلاین froggy
یک بازی آنلاین بسیار جالب برای تمرین و تثبیت مهارت های آموخته شده در بحث Flexbox ها وجود دارد که حتما توصیه می شود همه ۲۴ مراحل آن را طی کنید تا بیشتر و بیشتر روی FlexBox تسلط پیدا کنید
http://flexboxfroggy.com
در دوره آموزش حرفه ای طراحی وب در دو جلسه کامل مباحث flexbox را آموزش دادیم و همه مراحل بازی آنلاین معرفی شده را توضیحات کامل پیش رفتیم که می توانید آن را نیز ببینید.
همچنین پروژه نهایی دوره آموزش طراحی وب نت پارادیس نیز کاملا با flexbox طرح بندی و ریسپانسیو شده است که تمرین عالی برای flexbox ها است.
امیدوارم از بخش آخر آموزش فلکس باکس (Flexbox) نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
