ماژول Flexible Box یا همان Flexbox یک مدل جدید طرح بندی برای ساخت رابط کاربری انعطاف پذیر است.
درک مدل Flex
فلکس باکس یک مدل صفحه آرایی است که در CSS3 برای ساخت رابط کاربری منعطف به همراه چندین سطر و ستون بدون استفاده از مقادیر ثابت یا درصد معرفی شد.
فلکس باکس (Flexbox) یک مکانیزم ساده و قدرتمند را برای مدیریت نحوه توزیغ فضای خالی و ترازبندی محتوا بصورت اتوماتیک از طریق استیال ها بدون تغییر در بخش HTML را در اختیار ما قرار می دهد.
به عنوان مثال اگر شما بخواهید یک صفحه برای نمایش یک ستونی یا دو ستونی از عکس ها را داشته باشید با مشکل چندانی رو به رو نیستید ولی برای صفحه آرایی های چند ستونه ی تودرتو قطعا با دردسرهای مختلفی مواجه خواهید شد
و همچنین یکسان سازی صفحه آرایی صورت گرفته در مرورگرهای مختلف کار شما را پیچیده تر می کند.
اگر با صفحه آرایی امروزی آشنا باشید قطعا با مشکل Float که به وسیله تکنیک Clearfix حل می شود دست و پنجه نرم کرده اید و حتی از مشکل whitespace که در صفحه آرایی با inline-block به وجود می آید آگاهی دارید.
برخی از امکانات فلکس باکس (Flexbox)
- چیدن عنصرها در یک ردیف کنار هم بدون نیاز به تعیین عرض مشخص و دقیق برای آنها
- اگر برای عنصرهایی که در یک خط قرار گرفتن جای کافی نباشد به راحتی عنصر آخر به صورت خودکار در ردیف بعد قرار می گیرد.
- به سرعت می توان چیدمان عنصرهای کنار هم را از افقی به عمودی و بالعکس عوض کرد.( فقط با تغییر یه کلمه )
- همتراز سازی چپ, راست و مرکز نسبت به عنصر نگهدارنده
- امکان تغییر ترتیب عنصرها بدون دست کاری در HTML ( این یکی واقعا خیلی عالیه )
- تعیین کردن اندازه ی عنصر نسبت به اندازه ی عنصر نگهدارنده بدون نگران بودن در مورد واحد اندازه ی عنصر نگهدارنده و تغییرات viewport ( پنجره مرورگر)
مثال زیر نحوه ساخت صفحه سه ستونه که هر کدام عرض و ارتفاع یکسان را دارد ر با استفاده از flexbox نشان می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS3 Three Equal Flex Column</title> <style type="text/css"> .flex-container { width: 80%; min-height: 300px; display: -webkit-flex; /* Safari */ display: flex; /* Standard syntax */ border: 1px solid #808080; } .flex-container div { background: #dbdfe5; -webkit-flex: 1; /* Safari */ -ms-flex: 1; /* IE 10 */ flex: 1; /* Standard syntax */ } </style> </head> <body> <div class="flex-container"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> </div> </body> </html> |
اگر دقت کرده باشید در کد مثال بالا ما هیچ عرضی برای <div> های داخلی .flex-container تعریف نکردیم, امادر خروجی هر ستون دقیقا مساوی با دیگر المان های داخلی .flex-container است.
فلکس باکس (Flexbox) چطور کار می کند
Flexbox شامل یک عنصر نگهدارنده ( container ) و عنصرهای داخلی ( flex-item ) است
بیشترین ویژگی ها به عنصر نگهدارنده داده می شود.
برای تعیین یک نگهدارنده از نوع flexbox باید display را از نوع flex (یک فلکس block-level را ایجاد می کند) یا inline-flex (یک فلکس مشابه inline-block می سازد) تعریف کنیم.
|
1 2 3 4 |
.flex-container { display : flex; } |
همه المان های فرزند فلکس نگهدارنده بطور خودکار به آیتم های فلکس تبدیل می شوند و ویژگی های float, clear, vertical-align تاثیری بر آیتم های flexbox ندارند.
آیتم های فلکس داخل عنصر نگهدارنده روی یک خط موقعیت دهی می شوند که با ویژگی flex-direction قابل کنترل است.
حال اگر بخواهیم عنصرها به جای چیدمان افقی, چیدمانی عمودی داشته باشند کافی است flex-direction را از نوع column تعریف کنیم.
دو مقدار دیگری که flex-direction می گیرد row-reverse و column-reverse می باشند که باعث می شوند ترتیب قرار گرفتن عنصرها به صورت عمودی بالعکس یا افقی بالعکس نمایش داده شود. مقدار پیشفرض برای این ویژگی row است.
توجه به این موضوع حائز اهمیت است که direction صفحه یا عنصرهای سطوح بالاتر تاثیر بر روی flex-direction از نوع row دارند که جهت قرار گرفتن عنصرها در موارد مختلف به قرار زیر است:
row: در ltr از چپ به راست, و در rtl از راست به چپrow-reverse: در ltr از راست به چپ, و در rtl از چپ به راست
|
1 2 3 4 |
.flex-container { flex-direction: row; } |
ویژگی بعدی که برای عنصر نگهدارنده تعیین می شود flex-wrap می باشد. فرض کنید مجموع اندازه عنصرهای داخلی بیشتر از اندازه عنصر نگهدارنده شود, به وسیله این ویژگی می توان کنترل کرد که عنصرها به خط بعد بروند یا در همان خط بمانند.
که مقادیراین ویژگی به شرح زیر است:
wrap: باعث می شوند عنصرها به خط بعد بروندnowrap: مقدار پیشفرض که باعث می شود تحت همه شرایط تمام عنصرها در یک خط باقی بمانند.wrap-reverse: این ویژگی باعث می شود عنصرهایی که در عنصر نگهدارنده جای نمی گیرند در همان خط بمانند و به جای آنها عنصرهای دیگر که از لحاظ ترتیب قبل آنها قرار دارند به خط بعد بروند.
|
1 2 3 4 |
.flex-container { flex-wrap: wrap; } |
می توان این دو ویژگی را به صورت کوتاه شده در یک ویژگی به نام flex-flow بیان کرد:
|
1 2 3 4 |
.flex-container { flex-flow: row wrap; } |
عکس زیر حاوی مفاهیم و کلمات مهمی در مورد محورهای چیدمان هستند که باید بشناسیم.
هم ترازسازی عنصرهای داخلی نسبت به محور اصلی (Main axis) به کمک justify-content
به کمک ویژگی justify-content که به عنصر نگهدارنده اطلاق می شود می توان عنصرهای داخلی را نسبت به محور اصلی هم تراز کرد که شکل زیر مقادیر ممکن برای این ویژگی و چگونه هم تراز سازی را برای هر مقدار نشان می دهد.
نکته اینکه این ویژگی همچنین بر روی عنصرهایی که به خط بعد سرریز می شوند هم تاثیر می گذارد. در مثال مورد نظر ما داریم:
|
1 2 3 4 |
.flex-container { justify-content: space-around; } |
هم ترازسازی عنصرهای داخلی نسبت به محور عمود (Cross axis) به کمک align-items
شکل زیر مقادیر قابل تعریف برای align-items را روشن بیان می کند.
لطفا به دو گزینه baseline و stretch بیشتر توجه کنید چون هر دوی این ها واقعا جزو آروزی های css کارها بوده اند. همیشه ما به دنبال این بودیم که جدا از محتوای ستون هایمان آنها بتوانند ارتقاعی پویا و همینطور برابر داشته باشند. داریم:
|
1 2 3 4 |
.flex-container { align-items: stretch; } |
align-content
آخرین ویژگی در رابطه با عنصر نگهدارنده align-content می باشد. این ویژگی اجازه می دهد زمانی که عنصرهای داخلی بیشتر از یک ردیف هستند بتوان آن چند ردیف را نسبت به محور عمود هم ترازسازی کرد.
|
1 2 3 4 |
.flex-container { align-content: space-around; } |
واضح است که این ویژگی زمانی که فقط یک ردیف از عنصرهای داخلی وجود دارند کاربردی ندارد.
امیدوارم از بخش اول آموزش فلکس باکس (Flexbox) نهایت استفاده را برده باشید.
در بخش بعدی مبحث flexbox را تکمیل و یک تمرین عالی را خدمتتون معرفی خواهیم کرد.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
