Flexbox ni o'rganamiz (1-qism).

Web development

Flexbox orqali, float yoki position xusisiyatlarni ishlatmasdan moslashuvchan maket (dizayn) tuzilmalari yasashingiz mumkin.

Flex elementlar.

Flexbox dan foydalanish uchun flex kontainer yaritib olish kerak bo'ladi.

<div class="flex-container">

<div>1</div>

<div>2</div>

<div>3</div>

</div>

Parent Element (Konteyner)

Flex kontainer yuqoridagi parent elementning display xususiyatini o'zgartirish orqali hosil qilinadi. Flex kortainer ichidagi child (farzand) elmentlar flex elementlar hisoblanadi.

.flex-container {

display: flex;

}

Flex-direction xususiyati.

flex-direction xususiyati orqali flex elementlarning ketma-ket joylashish yo'nalishi belgilanadi.

flex-direction: column - qiymati joylashish yo'nalishini vertical yo'nalishda (yuqoridan pastga qarab) belgilaydi.

.flex-container {

display: flex;

flex-direction: column;

}

flex-direction xususiyatining yana 3 ta

column-reverse - qiymati vertical yo'nalishda pastdan yuqoriga

row - qiymati gorizantal yo'nalishda chapday o'ng tomonga (default qiymati) va

row-reverse - o'ngdan chap tomonda jo'ylashish tartibini belgilash uchun ishlatiladigan qiymatlari mavjud.

flex-wrap xususiyati.

flex-wap xususiyati elemetlar lozim bo'lganda(sig'maganda) keyingi qatorga o'tishi yoki o'tmasligi kerakligini nazorat qilish uchun ishlatiladi.

flex-wrap: wrap - qiymati: lozim bo'lganda flex elementlar keyingi qatorga o'tishi

.flex-container {

display: flex;

flex-wrap: wrap;

}

flex-wrap xusiyatining yana 2 ta

nowrap - keyingi qatorga o'tishini cheklash va

wrap-reverse - keyingi qatorlarga teskari tartibda o'tish kabi qiymatlari mavjud.

.flex-container {

display: flex;

flex-wrap: wrap-reverse;

}

justify-content xususiyati.

justify-content - xususiyati flex elementlarni tekislash uchun ishlatiladi (matnlar uchun text-align ni eslang).

justify-content: center - markazdan tekislash.

flex-container {

display: flex;

justify-content: center;

}

justify-content - xususiyatining yana quyidagi qiymatlari bor:

flex-start - konteyner boshidan boshlab tekislaydi.

flex-end - oxiridan tekislaydi.

space-around - elementlar orasidan bir xil kattalikda bo'shliq qoldiradi (a-rasm).

space-between - ikki chegara aniqrog'i boshi va oxiri dan tekislaydi (b-rasm).

align-items xususiyati.

Ushbu xususiyat yordamida flex elementlar vertikal o'q (konteyner balandligi) bo'yicha tekislash uchun ishlatiladi.

align-items: center xolati elementlar konteyner balandligi bo'yicha markazdan joylashishi.

.flex-container {

display: flex;

height: 200px;

align-items: center;

}

flex-start - vertical ravishda yuqoridan,

flex-end - pastdan va

stretch - kontainer balandligi bo'yicha to'liq joylashadi. Bu qolgan qiymatlarni mustaqil ravishda tekshirb ko'rishingiz maqsadga muofiq bo'ladi.

E'tibor bering: flex-direction xususiyati yordamida flex elementlarning ketma-ket joylashish yo'nalishi o'zgartirilgan taqdirda justify-content va align-items xususiyatlari ham mos ravishda yo'nalishini o'rgartiradi.

Tajriba:

Elementni haqiyqiy markazga joylashtirish.

Bu tajriba amaliyotda juda kam ko'p qo'llaniladi va ko'pgina qiyinchiliklarni bartaraf etadi. Yuqorida ko'rganimizdek Flex elementni gorizantal joylashtirish uchun justify-content va vertical uchun align-items xususiyatlaridan foydalanamiz.