- صفحه اصلی
- آموزش , آموزش css , آموزش html , مقالات آموزشی
- آموزش کامل، تصویری و قدم به قدم فلکس باکس flex box
آموزش فلکس باکس در css یکی از مهم ترین تکنیک هایی است که در طراحی وب با html و css باید بلد باشید شما با استفاده از flex box در css براحتی میتوانید چیدمان المان های صفحه را به بهترین شکل انجام دهید بدون اینکه نیاز به استفاده از خصوصیت هایی مثل float و position و… داشته باشید. در این پست آموزش فلکس باکس و نحوه استفاده از آن را بصورت کاملا رایگان یادمیگیرید.
آموزش flexbox در css
آموزش flexbox در css یکی از مباحث کاربردی است، با کمک flexbox شما قادر خواهید بود صفحات خود را بدون درگیر شدن با مشکلاتی نظیر float یا whitespace براحتی طراحی کنید. مزیت صفحه آرایی با فلکس باکس این است که صفحات بصورت ریسپانسیو خواهند بود. از جمله امکاناتی که flexbox در اختیار توسعه دهندگان قرار می دهد می توان به این موارد اشاره کرد:
- عناصر یک ردیف بدون نیاز به تعیین عرض مشخص، کنار یکدیگر قرار میگیرند.
- در صورتی که در یک ردیف فضای کافی وجود نداشته باشد، آخرین عنصر به خط بعدی منتقل می شود.
- جهت چیدمان براحتی با تغییر یک عبارت خاص به افقی یا عمودی قابل تغییر است.
- عناصر را می توان نسبت به یک عنصر مشخص همتراز کرد. این ترازبندی در سه حالت چپ، میانه و راست قابل اجراست.
- ترتیب عناصر را می توان بدون تغییر کدهای html جابجا کرد.
- تعیین سایز عناصر نسبت به سایز یک عنصر مشخص برحسب درصد
برای شروع کار آموزش فلکس باکس در css ابتدا به معرفی عناصر اصلی فلکس باکس می پردازیم. اولین عنصر نگهدارنده یا container است. منظور از نگهدارنده همان گرید مادر است. سایر آیتم های فرزند یا flex-item ها داخل این گرید قرار می گیرند. مطابق شکل زیر:
معمولا ویژگی ها بصورت سلسله مراتبی به این عناصر داده می شود و بیشتر ویژگی ها برای عنصر container تنظیم می شود. نحوه تعریف این دو عنصر به صورت زیر است:
در قسمت display در کد اول، می توان از inline-flex به جای flex استفاده کرد در اینصورت نگهدارنده یا container به فرم inline نشان داده میشود. تنظیم نحوه چیدمان با دستور flex-direction انجام می شود. می توان حالت افقی (row) یا عمودی (column) را انتخاب کنیم. همجنین می توان چیدمان را عمودی وارونه row-reverse یا افقی وارونه column-reverse نیز تنظیم کرد. نحوه قرار گرفتن عناصر در این ردیف ها یا ستون نیز به دو صورت rtl یعنی از راست به چپ یا ltr یعنی از چپ به راست انجام می شود.
حال در نظر بگیرید که عناصر شما از سایز container بیشتر باشد در این حالت به سه صورت می توان عناصر را جایگذاری کرد. این ویژگی flex-wrap نام دارد:
- حالت wrap : عناصر به ردیف بعدی هدایت می شوند.
- حالت nowrap : عناصر در ابعاد کوچکتر در همان ردیف اضافه شوند.
- حالت wrap-reverse : برعکس حالت اول است یعنی عناصر اضافه در همان ردیف می مانند و عناصر داخل ردیف به ردیف بعدی منتقل می شوند.
نحوه نوشتن این ویژگی در کد بصورت زیر است. دقت کنید که این ویژگی برای نگهدارنده تعریف می شود.
میتوان حالتی تعریف کرد که دو ویژگی بالا بصورت کوتاه شده در یک ویژگی تحت عنوان flex-flow قرار گیرد. بطور مثال:
آشنایی با محورها در flexbox
در قسمت بعدی از آموزش flexbox به نحوه تنظیم محورها می پردازیم. به دو تصویر زیر به دقت نگاه کنید.
همانطور که در تصویر مشاهده می کنید محور اصلی یا main axis اشاره به محوری دارد که مولفه ها را در کنار یکدیگر قرار می دهد. cross axis برای آیتم های داخلی و نگهدارنده دو معنای متفاوت دارد که به ترتیب در تصویر اول و تصویر دوم نمایش داده شده است.
ترازبندی عناصر نسبت به main axis
مبحث دیگر در آموزش flexbox نحوه هم ترازسازی عناصر است. با کمک یک ویژگی به نام justify-content می توانید عناصر داخلی یک نگهدارنده را نسبت به main axis ترازیندی کنید. این ترازبندی می تواند چندین حالت مختلف داشته باشد. در تصویر زیر این حالت ها نمایش داده شده است.
کد زیر نمونه ای از این ترازبندی را نشان می دهد.
ترازبندی عناصر نسبت به محور cross axis
مطابق محور اصلی می توان ترازبندی را براساس محور عمودی نیز انجام داد. برای اینکار از ویژگی align-item استفاده می کنیم. در شکل زیر انواع ترازبندی عمودی را مشاهده می کنید.
کد زیر نمونه ای از این نوع ترازبندی است:
ترازبندی عناصر اضافه نسبت به cross axis
در صورتی که عناصر ما در بیش از یک ردیف قرار داشتند نیز می توان آنها را نسبت به محور عمود تراز بندی کرد. این قابلیت با استفاده از ویژگی align-content انجام می شود. به شکل های زیر دقت کنید.
نحوه استفاده از آن در کد css بصورت زیر است:
تغییر چینش آیتم های داخلی
تغییر نحوه چینش عناصر داخلی یکی دیگر از مباحث آموزش فلکس باکس است که در ادامه به آن می پردازیم. اولین ویژگی order است. با کمک این ویژگی، می توان ترتیب نمایش عناصر را تغییر داد بگونه ای که تغییری در ساختار html ایجاد نشود. مقداری که برای این ویژگی تنظیم می شود یک عدد صحیح است. مقدار پیشفرض برای تمامی عناصر ۰ است. بزرگترین عدد نشانگر آخرین عنصر در ترتیب است (عناصر از چپ به راست در نظر گرفته می شوند). به تصویر زیر با دقت نگاه کنید.
در این مثال ما قصد داریم دومین عنصر در ترتیب تعریف شده در html (عنصر second) را از سمت چپ در اولین خانه قرار دهیم. به همین خاطر مقدار یک را برای آن مشخص می کنیم.
بسط دادن عناصر داخلی
یک مبحث مهم و کاربردی در آموزش flexbox بحث بسط دهی یا انعطاف پذیر سازی عناصر داخلی است. این قابلیت سایز عناصر را نسبت به فضای موجود در نگهدارنده تغییر می دهد. در صورتی که جهت نگهدارنده افقی (row) باشد عنصر از عرض رشد می کند و در صورتیکه نگهدارنده جهت عمودی (column) داشته باشد ارتفاع عنصر رشد خواهد کرد. در بحث انعطاف پذیری سه ویژگی مهم داریم که در ادامه به آن می پردازیم:
- flex-grow در css
این ویژگی درصد رشد یک عنصر نسبت به سایر عناصر را برحسب درصد نشان می دهد. مثلا در صورتیکه تمامی عناصر مقدار برابر یک داشته باشند فضای موجود بین تمامی عناصر داخلی بصورت برابر تقسیم می شود. اما عدد دو برای یک عنصر باعث می شود که دو برابر سایر عناصر فضا اشغال کند.
به عنوان مثال :
- Flex basis در css
یک قابلیت دیگر در flexbox ویژگی Flex basis در css است که برای تعیین ارتفاع یا عرض عناصر داخلی براساس جهت نگهدارنده استفاده می شود. یعنی در صورتیکه جهت نگهدارنده افقی (row) باشد، عناصر به اندازه تعیین شده از عرض فضا می گیرند و در صورتیکه نگهدارنده عمودی (column) باشد عناصر از ارتفاع فضا می گیرند. توجه داشته باشید این مقدار ثابت است و مانند flex grow بصورت درصدی تغییر نمی کند. در صورتیکه هر دو ویژگی همزمان استفاده شود ابتدا به اندازه مقادیر shrink به عناصر فضا داده می شود و سپس هر میزان فضایی که از نگهدارنده باقی ماند براساس grow میان عناصر تقسیم می شود.
در این مثال مقادیر ۲۰۰px.300px و ۲۵۰px به ترتیب به عناصر تخصیص داده می شود. پس از آن این مقدار از ۹۵۰px که عرض کلی نگهدارنده است کم شده و حاصل آن یعنی ۲۰۰px براساس میزان تعیین شده برای flex grow به عناصر داده می شود. یعنی به عنصر اول و سوم مقدار ۵۰px و به عنصر دوم دو برابر آن یعنی ۱۰۰px فضا اختصاص داده می شود.
- Flex shrink در css
آخرین دستور مربوط به منعطف سازی flexbox، دستور Flex shrink در css است. این دستور کاربرد زیادی ندارد و زمانی استفاده می شود که مجموع اندازه عناصر داخلی یک ردیف بیش از اندازه نگهدارنده بشود و به اصطلاح سرریز رخ دهد. در صورت بروز چنین مشکلی باید اندکی از فضای عناصر داخلی را کم کنیم تا این مسئله حل شود. به مثال زیر توجه کنید:
اگر مجموع عناصر بالا را محاسبه کنید برابر ۱۴۰۰px است حال تصور کنیم که اندازه نگهدارنده ۱۱۰۰px باشد و ما ۳۰۰px سرریز داشته باشیم. با توجه به مقادیر تعیین شده از عنصر اول به اندازه یک ششم فضای اشغالی آن یعنی ۵۰px باید کاهش دهیم از عنصر دوم به اندازه ۳/۶ یعنی ۱۵۰px باید کم کنیم و از سومین عنصر به اندازه ۲/۶ یعنی ۱۰۰px باید کم شود. که مجموع این سه برابر ۳۰۰px خواهد شد. با کمک سه دستور flex-grow ، flex basis و flex shrink در css شما قادرید تمامی عناصر داخلی خود را به طور متناسب تغییر اندازه دهید و مقادیر دلخواه خود را تنظیم کنید.
ترازبندی یک عنصر
آخرین مبحثی که قصد داریم در آموزش فلکس باکس به آن بپردازیم ویژگی align-self است . به کمک این ویژگی شما می توانید عناصر داخلی خود را ترازبندی کنید. بعنوان مثال:
که نتیجه خروجی کار به صورت زیر می شود.
پشتیبانی مرورگرها از fexbox
در شکل زیر پشتیبانی نسخه های مختلف مرورگرهای گوناگون از ماژول flexbox را ملاحظه می کنید. برای نسخه هایی که این ماژول را پشتیبانی نمی کنند می توان از flecibility یاflexiejs استفاده کرد.
آموزش فلکس باکس پایانی
آموزش فلکس باکس به پایان رسید امیدوارم با مطالعه این مقاله درک درستی از آموزش flex در css و صفحه آرایی با فلکس باکس پیدا کرده باشید و بتوانید خیلی راحت تر و لذت بخش تر گذشته در طراحی صفحات وب از آن استفاده کنید. اگر سوال یا ابهامی در رابطه با صفحه آرایی با flex box دارید حتما در بخش کامنت ها بپرسید با افتخار پاسخگوی سوالات شما همراهان همیشگی اسکریپت کینگ هستم
- آموزش
- اسکریپت ها
- HTML5
- آپلود سنتر
- آمارگیر
- اسکریپت تبلیغاتی
- اسکریپت خبرخوان
- اسکریپت فروشگاهی
- اسکریپت مدارس
- اسکریپت های Clone
- اسکریپت های سئو Seo
- اشتراک گذاری فایل
- اشتراک گذاری ویدیو
- ایجاد سایت های فیلم و سریال
- ایجاد سایت های موزیک
- بازی آنلاین
- پشتیبانی مشتریان
- جامعه مجازی
- جستجوی دامنه
- چت
- حراجی آنلاین
- خدماتی
- سرویس وبلاگدهی
- سیستم مدیریت محتوا
- کوتاه کننده لینک
- مدیریت کاربران
- دیگر اسکریپت ها
- افزونه ها
- سورس اپلیکیشن
- قالب ها
- ابزار وب مستر