آموزش کار با فلکس باکس (Flexbox)

 

آموزش کار با فلکس باکس (Flexbox) دوره ای پروژه محور و مقدماتی است که توسط هلدینگ فرتاک ارائه شده و شما در پایان قسمت ها باید تمرین هایی را جهت به چالش کشیدن مهارت های خود انجام دهید.

فلکس باکس مجموعه ای از قوانین css3 است که برای ایجاد ردیف یا ستون استفاده می شود. فلکس باکس به ما در طراحی سایت و ایجاد صفحه های ریسپانسیو در مدت زمان کوتاه بسیار کمک می کند که شما با استفاده از آموزش کار با فلکس باکس (Flexbox) با روش آن آشنا میشوید.

اگر شما در حوزه طراحی سایت فعالیت می کنید، قطعا از مشکلات صفحه آرایی و ریسپانسیو کردن سایت آگاهی دارید. با استفاده از فلکس باکس می توانید به راحتی مشکلات مربوط به این حوزه را بدون نیاز به attribute های دیگر، برطرف کنید.

 

کاربرد های فلکس باکس:

• قرار دادن عناصر در کنار هم و در یک ردیف بدون نیاز به انتخاب عرض مشخص برای آن ها
• در صورت نبود جای کافی برای عنصر، به صورت خودکار در ردیف بعدی قرار می گیرد.
• فقط با تغییر یک کلمه می توان چیدمان عنصرهای کنارهم را از حالت افقی به عمودی تبدیل کرد و بالعکس.
• همتراز کردن چپ، راست و مرکز نسبت به عنصر نگهدارنده
• امکان تغییر چیدمان عنصرها بدون دستکاری در html
• پشتیبانی از چیدمان معکوس
• تعیین سایز عناصر نسبت به سایز یک عنصر مشخص

 

ویژگی های فلکس باکس:

• جهت (Direction):

با استفاده از فلکس باکس می توانید موارد سایت خود را در جهت دلخواه خود مانند چپ، راست، بالا و یا پایین انتقال دهید.

 

• ترتیب(order):

با استفاده از فلکس باکس می توانید ترتیب مطالب یک صفحه‌ی سایت را دوباره مرتب کنید.

 

• پیچاندن(wrap):

در صورت نبود فضا برای محتوای یک صفحه می توانید آن ها را به چند خط، چه به صورت افقی و چه به صورت عمودی بپیچانید.

 

• تراز کردن (Alignment):

به وسیله ی فلکس باکس می توانید محتوای سایت را با توجه به مقدار آن ها تنظیم کنید.

 

• تغییر اندازه (Resize):

با استفاده از فلکس باکس توانایی تغییر اندازه ی موارد موجود در صفحه را داشته و می توانید آن ها را افزایش و یا کاهش دهید تا در مکان موجود قرار بگیرند.

 

فلکس باکس و پشتیبانی از مرورگرها:

 مرورگرهای زیر دارای قابلیت پشتیبانی از فلکس باکس هستند :

 

• Chrome 29
• Firefox 28
• Internet Explorer 11
• Opera 17
• Safari 6.1
• Android 4.4
• iOS 7.1

 

Flex Container:

در فلکس باکس المان ها در یک نگهدارنده به نام Flex Container  نگهداری می شوند.

 

خواص نگهدارنده (Flex Container) :

در فلکس باکس، ویژگی ها طوری تعریف شده اند که فقط به نگهدارنده نسبت داده می شوند. این خواص شامل موارد زیر است:

• Display : در این مورد باید مقدار display را مشخص کنیم که از نوع flex است و یا . inline-flex در این صورت المان ها تمامی صفحه را اشغال نمی کنند و به صورت خطی کنار هم قرار می گیرند.

 

• flex Direction : با استفاده از این ویژگی می توانید جهت قرارگرفتن آیتم های یک فلکس باکس را مشخص کنید.
• flex wrap : این ویژگی در فلکس باکس مشخص می کند که آیتم ها در صورت نیاز شکسته شده و به خط بعد بروند یا در همان سطر نمایش داده شوند.
• flex flow : جهت قرارگیری آیتم و همچنین نحوه ی شکسته شدن آیتم ها را مشخص می کند.
• justify content: این ویژگی می تواند محل قرارگرفتن آیتم های فلکس باکس را به صورت افقی مشخص کند.
• align content : با استفاده از این ویژگی می توانید تراز عمودی سطرهای یک فلکس باکس را مشخص کنید.
• align items : این ویژگی کمک می کند تا موقعیت قرارگرفتن آیتم های یک فلکس باکس را به صورت عمودی تعیین کنید.

 

تفاوت گرید با فلکس باکس در چیست؟

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

فلکس باکس و گرید علاوه بر شباهت هایی که باهم دارند، دارای تفاوت هایی نیز هستند که بسیار مهم است. این تفاوت ها شامل موارد زیر است :

 

• طراحی تک بعدی و دو بعدی : معمولا در طراحی صفحات وب عنصرها به دو حالت تک بعدی و دو بعدی درنظر گرفته می شوند. تک بعدی به این معناست که آیتم ها در یک مسیر قرار گرفته است که برای پیاده سازی این حالت برای کیفیت بهتر بایستی از فلکس باکس استفاده کنید. برعکس برای حالت دوبعدی از گرید استفاده می کنیم.

 

• الویت در محتوا یا طراحی: اگر قبل از طراحی سایت، محتوای خود را داشته باشید بایستی از فلکس باکس استفاده کنید. ولی اگر برعکس، ابتدا قصد طراحی سایت را داشته باشید و سپس به تولید محتوا بپردازید باید از گرید استفاده کنید.

 

• پیچیدگی تعیین اندازه‌ المان‌های طراحی : یکی از نقاط قوت فلکس باکس این است که آیتم ها، با هر اندازه ای می توانند درون آن قرار بگیرند. در حالی که در گرید چنین موضوعی صدق نخواهد کرد.

 

مقدمه :

معرفی دوره :

مختصری از دوره آموزش کار با فلکس باکس (Flexbox)

رایگان

فصل اول :

سر فصل 1

رایگان

فصل دوم :

سر فصل 2

رایگان

فصل سوم :

سر فصل 3

رایگان

فصل چهار :

سر فصل 4

رایگان

فصل پنج :

سر فصل 5

رایگان