پس از آشنایی ابتدایی در این باره که flexbox چیست و چه مزایایی برای پیاده سازی وب سایت دارد در این جلسه قصد داریم تا آموزش flexbox را شروع کنیم.
من امیر جوان میر هستم و امیدوارم دوره خوبی را با هم پشت سر بگذاریم.
flexbox یک ماژول است که از آن برای ایجاد ساختار و layout بندی محتوای وب سایت استفاده می شود.
ممکن است خیلی از افرادی که در حال پیاده سازی قالب وب سایت های خود یا مشتریان خود هستند هنوز ما ماژول flexbox آشنا نشده اند.اما با آشنایی و استفاده از این ماژول خیلی راحت و سریع می توانند
ساختار وب سایت خود را ایجاد کنند.
تاریخچه
این ماژول از سال ۲۰۰۹ وجود داشته است و نام دیگر box بوده است.در سال ۲۰۱۱ نامش از box به flexbox تغییر پیدا کرد.یکسال بعد در سال ۲۰۱۲ توسط کنسرسیوم جهانی وب یا
w3c به flex تغییر نام داد.
قبل از بوجود آمدن flexbox طراحان مجبور بودند از دستوراتی به نام float یا position المنت های خود را جابجا کنند.استفاده از این روش دارای مشکلات زیادی بود و خرابی هایی را
بخصوص در حالت ریسپانسیو بوجود می آورد.برای مثال زمانی که قصد داشتیم مشکل float را حل کنیم از دستور clear استفاده می کردیم.
برای بررسی می توانید به سایت caniuse بروید و واژه flex را جستجو کنید.همانطور که مشاهده می کنید اکثر مرورگرها از این ماژول پشتیبانی می کنند.
شروع کدنویسی
برای کدنویسی ابتدا در ویرایشگر یک سند html ایجاد می کنیم.ویرایشگری که برای کدنویسی به شما پیشنهاد می کنیم vscode است.برای راحتی کار یک فایل خارجی css نیز در سند لود می کنیم.
کد ابتدایی html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <title>flexbox dejavan.ir</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> </body> </html> |
حال در این سند یک div تعریف می کنیم که در داخل آن چندین المنت بصورت آیتم قرار دارد.برای div که آیتم ها را درون خود دارد کلاس container و به آیتم های درونی آن item گفته می شود.
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>flexbox dejavan.ir</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> </div> </body> </html> |
درباره flex container
زمانی که یک div را بعنوان flex معرفی می کنید آن div تبدیل به flex-container می شود و به آیتم های درونی آن flex-item گفته می شود.
به تصویر زیر دقت کنید.
کنار هم قرار دادن آیتم ها با استفاده از inline-block
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body{ padding: 0; margin: 0; direction: ltr; } .flex-container{ background: coral; padding: 20px 0; } .flex-container .flex-item{ background: #fff; display: inline-block; padding: 50px; margin: 0; } |
کنار هم قرار دادن آیتم ها با استفاده از flex
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body{ padding: 0; margin: 0; direction: ltr; } .flex-container{ background: coral; padding: 20px 0; display: flex; } .flex-container .flex-item{ background: #fff; padding: 50px; margin: 10px; } |
