January 7, 2022

flex-container xossalari

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items

Flex direction - asosiy o'qning yo'nalishini belgilab beradi va flex
items shu o'qga nisbatan joylashganligi uchun, ularning ham
yo'nalishi belgilanadi

flex direction :

row - (default) yani chapdan ongga yonalgan

row-reverse - ongdan chapga qarab joylashgan items

column - tepadan pastga

column-reverse - pastdan tepaga

flex-wrap

elementlarni bir necha qatorga joylashtirsh .
default holatda barcha items olchamidan qati nazar bir qatorda joylashadi

flex-wrap :

nowrap - default hamma elementlar bir qatorda joylashishga harakat qiladi

wrap - sigmagan element pastki qatorga tushadi

wrap-reverse - 1 chi qator elementlari pastdan tepaga qarab joylashadi

flex-flow :

Flex flow - flex-direction va flex-wrap xossalari uchun qisqartma
hisoblanadi

flex-flow : row nowrap ; (default)

birinchi qiymat flex-direction

ikkinchi qiymat flex-wrap

Justify content - asosiy o'qi bo'ylab elementlarni joylashuvini
belgilaydi va qo'shimcha bo'sh joyni taqsimlashga yordam beradi

justify-content :

flex-start - default

flex-end - container oxiriga joylashadi

center - container ortasiga

space-between - container boyicha teng taqsimlanadi va 1-element birinchida oxirigi element oxirida joylashadi

space-around - barcha element atrofida bir xil joy qoladi

space-evenly - elementlar orasida bir xil joy

align-items

item lar boyi boyicha joylashadi

align-items:

stretch - item boyini toldirish uchun choziladi

agar container ga height berilgan bolsa va items ga height berilmagan bolsa ishlaydi

center- containerning boyi boyicha ortaga joylashadi

flex-end - containerning boyi boyicha oxiriga joylashtiradi

flex-start - containerning boyi boyicha boshiga joylashtiradi