Muhammad al-Xorazmiy nomidagi Toshkent axborot texnologiyalari universiteti kiberxavfsizlik fakulteti
Reja - Flex Items xususiyatlari.
- Flex-direction xususiyati.
- flex-grow xususiyati.
- align-self xususiyati.
- flex-basis xususiyati.
Flex elementlar. - Flex elementlar.
- Flexbox dan foydalanish uchun flex kontainer yaritib olish kerak bo'ladi.
- flex container(qizil maydon) uchta flex elementlar bilan
Parent Element (Konteyner) - 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.
- 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.
- wrap-reverse ga misol
- .flex-container {
- display: flex;
- flex-wrap: wrap-reverse;
- }
Do'stlaringiz bilan baham: |
