Float float: left elemnitmizni joylashuvini chap tomonga qilib beradi float: right elemnitmizni joylashuvini o`ng tomonga qilib beradi


Download 5.46 Mb.
Sana22.07.2023
Hajmi5.46 Mb.
#1661797
Bog'liq
9 - DARS. CSS FLEX

FLOAT

float: left - elemnitmizni joylashuvini chap tomonga qilib beradi.

float: right - elemnitmizni joylashuvini o`ng tomonga qilib beradi.

POSITION

absolute - agar bu qiymatni biz elemntga beradigan bo`lsak, element boshqa elemntarga nisbatdan mutlaq befarq bo`ladi.

fixed - agar bu qiymatni biz elementga beradigan bo`lsak, element scroll vaqtida sahifamiz bilan birga scroll bo`ladi. fixed xudi absolute qiymatiga o`xshash.

POSITION

relative - bu qiymat bizga o`zini oldingi ko`rinishini bo`sh qoldiradi va elementni o`zini biz joylashuvini aniqlab berishimiz mumkin.

sticky - bu qiymat bizga elemntni sahifa bilan scroll qilishda xizmat qiladi.


absolute
fixed
relative
sticky

DISPLAY

block - qiymati bizga elemntni 100% kenligini egallab yangi qatorga o`tqazib beradi.

inline-block - qiymati bizga elemntlarni hammasini bir qatorga qilib berish uchun xizmat qiladi.

DISPLAY : FLEX

flex qiymati doimo elemntning onasiga(родительский) ishlatiladi !!! Onasining ichidagi elemetlar yani farzandlari o`zi bir qatorga (auto) joylashib oladi.

FLEX - DIRECTION

row - bizga bloklarimizni(elemntlarimizni bir qatorga) aniq belgilab beradi.

row - reverse bizga bloklarimizni(element) chapdan o`nga emas, balki o`ng tomondan chapga boshlab beradi.

FLEX - DIRECTION

column - qiymati bizga bloklarimizni(element) yangi qatorga o`tqazib beradi.

column - reverse esa bloklarni(elemnt) pastdan tapaga joylashuvini o`zgartirib beradi.


flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

WRAP

flex-wrap agar biz elementlarni yangi qatorga o`tqazmoqchi bo`lsak, bizga

flex-wrap yordam beredi.

wrap - yangi qatorga o`tqazib beradi.

nowrap - o`z holati, yani yangi qatorga otqazmaydi ko`p elemnt bo`lsa ham.

justify-content bizga gorizontlal joylashuvini aniqlab beradi.

align-item bizga vertikal joylashuvini aniqlab beradi


Download 5.46 Mb.

Do'stlaringiz bilan baham:




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling