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

به نام خدا برای آموزش نحوه کار کردن با flexbox در جلسه های قبلی توضیح تئوریشو با هم مرورکردیم در این جلسه میخواییم یک کم کد هایی که مربوط به flexbox میشه رو باهم مرور کنیم
به طور کلی ما برا ی استایل دهی به flexbox ما دوحالت داریم که یکی باید container یا المان پدر رو استایل بدیم ک در این جلسه ما هم مرور میکنیم چنتایشو و در جلسه بعد هم نحوه استایل دهی به المان فرزند رو مرور می کنیم

متغییر های والد

display

این ویژگی با توجه به نوع فرزند container رو منعطف میکنه که بین inline یا block یکی رو انتخاب کنیم

.container {
display: flex; /* or inline-flex */
}

نکته اینکه CSS columns هیچ تاثیر روی container ، flex نداره

flex-direction

این ویژیگی محور اصلی رو محاسبه میکنه ، و جهت ایتم های فرزند رو بر روی flex container قرار میده

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

row(پیشفرض): چپ به راست در ltr و در حالت rtl راست به چپ
row-reverse:چپ به راست در ltr و در حالت rtl راست به چپ
column:مانند rowولی از بالا به پایین
column-reverse: مانند row-reverse ولی برعکس

flex-wrap

به صورت پیشفرض همه آیتم ها در یک خط قرار مییگیرند . شما میتونید تغییر بدید ایی حالت رو با این ویژگی و به صورت شکل بالا در بیا ورید

.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(پیشفرض): در یک خط نشون میده
wrap: به صورت پشت سر هم در چند خط از بالا ب پایین نشون میده
wrap-reverse: به صورت قبلی ولی معکوس

در جلسه بعد دیگر متغییر های والد که وجود داره رو مرور میکنیم

موفق باشید
با ما همراه باشید

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

account_box ali kaviani


local_offer

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

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