Warning: include_once(/home2/themeyab/domains/themeyab.com/public_html/class/mail_api/vendor/autoload.php): failed to open stream: No such file or directory in /home2/themeyab/domains/themeyab.com/public_html/include.inc on line 51 Warning: include_once(): Failed opening '/home2/themeyab/domains/themeyab.com/public_html/class/mail_api/vendor/autoload.php' for inclusion (include_path='.:/usr/local/php-5.6/lib/php') in /home2/themeyab/domains/themeyab.com/public_html/include.inc on line 51 Warning: Cannot modify header information - headers already sent by (output started at /home2/themeyab/domains/themeyab.com/public_html/include.inc:51) in /home2/themeyab/domains/themeyab.com/public_html/index.php on line 51 Warning: strpos(): Empty needle in /home2/themeyab/domains/themeyab.com/public_html/index.php on line 54 آموزش Flexbox - قسمت اول | تم یاب
وبلاگ
آموزش Flexbox - قسمت اول
30 شهریور 94

همه ما با Layout بندی فعلی از طریق CSS آشنایی داریم (display ، margin: auto; ، max-width ، position ، float ، clear ، media query ، inline-block و ...) و تقریبا همه مشکلات آنها را میدانیم. برای مثال حتما با مشکل Float که به وسیله تکنیک Clearfix حل می شود برخورد داشته‌اید؛ خبر خوبی که برای طراحان وب وجود دارد این است که با معرفی Flexbox نه تنها تمامی این موارد برطرف شده‌اند، بلکه قابلیت های بسیار خوب و کاربردی به کمک این دستور در اختیار شما قرار گرفته است.


Flexbox چیست؟

Flexbox یک مدل Layout بندی جدید است که با CSS3 معرفی شد و هدف آن ایجاد لایه بندی پویا و انعطاف پذیر است. در ادامه به معرفی قابلیت ها و آموزش استفاده ازFlexbox می پردازم.

flexbox syntax

برخلاف آنچه اکثر طراحان وب فکر می‌کنند Flexbox خیلی هم تازه نیست! Flexbox ابتدا در ژولای 2009 با سینتکس display : box معرفی شد و بعد از یک سری تغییرات در مارس سال 2011 سینتکس آن تغییر یافت و به display: flexbox تبدیل شد. سپس در سپتامبر 2012 مرحله ی سوم بازبینی از سینتکس این قابلیت توسط W3C یا همان کنسرسیوم شبکه جهانی وب انجام گرفت که در نهایت به شکل کنونی که همان display: flex است تغییر یافت.


بار برخلاف ۲ مرتبه گذشته این display : flex مورد تائید W3C واقع شد و این Syntax به عنوان سینتکس همیشگی فلکس باکس معرفی شد.


پشتیبانی مرورگر flexbox

در حال حاضر تمامی مرورگرها به جز اینترنت اکسپلورر ۸ و ۹ از flexbox پشتیبانی میکنند پس با خیال راحت میتوانید از این قابلیت استفاده کنید.



نحوه ایجاد Flexbox

برای استفاده از Flexbox نیاز به Flex-container و Flex-item دارید.

Flex-container همان محدوده ای است که قرار است است در بر گیرنده چندین آیتم باشد. به عنوان مثال فرض کنید که شما ۳ div دارید که می‌خواهید این ۳ div در کنار یکدیگر قرار بگیرند. در این حالت شما یک div کلی خواهید داشت (که اصطلاحا به آن Flex-container گفته می‌شود) و در داخل آن ، ۳ عدد div جداگانه قرار خواهید داد (که همان Flex-item خواهند بود).


Flexbox container & Flexbox item

سورس کد:

                
<div> flex-container
    <div> flex-item</div>
    <div> flex-item</div>
    <div> flex-item</div>
</div>

ساخت Flex-container به وسیله خاصیت display

برای ایجاد flex-container به المنت مورد نظر display: flex یا display: inline-flex می‌دهیم. در آن حالت تمامی المنت‌های درون flex-container به flex-item تبدیل می شوند. (کار inline-flex شبیه flex است با این تفاوت که باعث می شود عنصر نگهدارنده خاصیت inline بگیرد).


ایجاد Flexbox container
                
.container {
    display: flex;
}

یا

.container {
    display: inline-flex;
}

ترتیب نمایش flex-item ها با خاصیت flex-direction

قدم بعدی انتخاب نحوه نمایش flex-item ها است. تا اینجا ما یک div ساخته ایم که قرار است ۳ div که همان flex-item ها هستند را در داخل خود جای دهد.

به طور کلی ما ۴ حالت برای نمایش این div ها خواهیم داشت که در ادامه به همراه عکس توضیح داده شده است. برای اینکه تمامی flex-item ها به صورت ردیف یا ستون در کنار هم قرار بگیرند از خاصیت flex-direction استفاده می کنیم.


Flex Direction
                
.container
{
    flex-direction: row;
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;
}

  • row : این مقدار برای چیدمان افقی به کار میرود. اگر صفحه شما RTL باشد چیدمان از راست به چپ انجام می شود در غیر اینصورت آیتم ها از چب به راست قرار میگیرند.

  • Column : اگر میخواهید چیدمان عمودی داشته باشید از این مقدار استفاده کنید.

  • row-reverse و column-reverse : این دو دقیقا برعکس ۲ مورد قبلی بودن. اگر در حالت row چیدمان آیتم ها از چپ به راست بود در row-reverse به صورت برعکس آن یعنی راست به چپ خواهد بود. همچنین در column-reverse هم چیدمان آیتم ها از پایین به بالا خواهد بود.


در پایین شما می‌توانید نتیجه این کدها را مشاهده کنید:


See the Pen FlexBox1 by Ali Haddadkar (@ali_haddadkar) on CodePen.


قسمت اول سری آموزش فلکس باکس به اتمام رسید در این قسمت مقدمه‌ای برای آموزش Flexbox عنوان کردیم. در جلسات آینده با خصوصیات بیشتری آشنا خواهید شد.


به روز رسانی

جلسه بعدی آموزش Flexbox در سایت قرار گرفت. شما می‌توانید قسمت دوم آموزش Flexbox را از اینجا مطالعه کنید.


نویسنده: علی حدادکار
نجمه
7 سال و 9 ماه پیش
سلام لطفا بهم بگید این کدها رو کجا باید بزنم؟ فلکس باکس یه نرم افزاره که باید نصب شه؟ مث ورد پرس؟
ارسال پاسخ
themeyab
تم یاب
7 سال و 9 ماه پیش
سلام ، این کدها کدهای CSS هستند و شما آن ها را باید درون فایل CSS و HTML خود بنویسید.
ارسال پاسخ
ارسال نظر
نظر خود را با کاربران تم یاب در میان بگذارید.
CAPTCHA

  • 3283 کاربر

  • 153 قالب

  • 1364 خرید

  • 33 قالب وردپرس

درباره تم یاب
ما در تم یاب به عنوان اولین پایگاه فروش قالب به ویژه قالب وردپرس، فرصتی را فراهم کردیم تا طراحان و برنامه نویسان، محصولات با کیفیت خود را به راحتی عرضه کنند. هم چنین برای خریداران (قالب استاتیک، قالب وردپرس، افزونه وردپرس و ...) محصولاتی استاندارد و با کیفیت ارائه کنیم.
راهنمای تم یاب
دسته بندی
تاییدیه ها
اینماد
logo-samandehi
© تمام حقوق آثار قرارگرفته در تم یاب برای طراحان آن محفوظ می باشد و نقض آن پیگرد قانونی به همراه خواهد داشت.