جلسه ۱ – لایه بندی flexbox (ویژگی ها)

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

مقدمه

از اونجایی که flex یک ویژگی بزرگی هست و شامل یک pproprty نمیشه و چندین مجموعه از ویژگی ها رو در بر میگیره.
بعضی از اونها که شامل کانتینر می شوند (المان والد با flex container شناخته می شوند ) و بعضی ها در هم شامل کانتیر فرزند می شوند (flex items نامیده می شوند)
اگه لایه بندی معمولی بر اساس هم بلاک و هم inline از جهت مسیر باشه . لایه بندی flex بر اساس flex-flow directionas هستند .
به شکل زیر دقت کنید جهت فهمیدن ایده لایه بندی

ویژگی ها

در ابتدا ، آیتم ها بر روی محور اصلی چیده می شنود (به ترتیب از نقطه ابتدایی تا نقطه انتهایی قرار میگیرند ) یا در محور عمود بر محور اصلی ( از ابتدا تا انتها قرا میگیرند )

محور اصلی : محور اصلی در کانتینر ها در واقع محوری که هر کدوم از flex item ها روی آن قرار میگیرند و حتما لازم نیست افقی باشه و به ویژگی flex-direction بستگی داره.

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

اندازه اصلی : یک flex آیتم دارای اندازه و طول هست که هرکدوم که در جهت محور اصلی باشند سایز اصلی نامیده می شنود.

محور متاقطع : محوری که عمود بر محور اصلی هستش و جهتش وابسته به محور اصلی.

متقاطع شروع و متقاطع پایان : خطوط flex توسط آیتم ها و قرار گرفتن آنها در کانتینر پر می شود و از سمت متقاطع شروع ،شروع میشنود تا متقاطع پایان ادامه دارند.

متاقطع اندازه : مانند اندازه اصلی متاقطع اصلی هم تعریف میشه با این فرق که در جهت متقاطع .

 

در قسمت های بعد هر کدام از flex container و flex items بررسی خواهیم کرد

 

با ما همراه باشید

موفق باشید

local_offerevent_note خرداد ۱۲, ۱۳۹۷

account_box ali kaviani


local_offer

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *