CSS da fleks bloklaridagi asosiy va kesish o‘qlari
Fleksbokslar haqida ikki atorda gapirish mumkin: birinchi - qator yoki ustun, ikkinchi - o‘qlar nuqtai nazaridan. Biz qatorlar va ustunlar bilan allaqachon tushundik, endi esa o‘qlar bilan tushunamiz. O‘qlarni tushunish elementlarni gorizontal yoki vertikal yo‘nalishda joylashtirish uchun kerak.
Fleks elementlari bilan ishlashda har doim
asosiy o‘q va kesish o‘qi mavjud. Biz elementlarni
asosiy o‘q bo‘yicha va asosiy o‘qning
kesishiga joylashtirishimiz mumkin. Asosiy o‘q 4
yo‘nalishga ega bo‘lishi mumkin: chapdan o‘ngga, o‘ngdan chapga,
yuqoridan pastga va pastdan yuqoriga.
Kesish o‘qining yo‘nalishi asosiysining yo‘nalishiga bog‘liq: agar asosiy o‘q gorizontal bo‘lsa, kesish o‘qi yuqoridan pastga yo‘nalgan, agar asosiy o‘q vertikal bo‘lsa, kesish o‘qi chapdan o‘ngga yo‘nalgan. Boshqa yo‘nalishlar kesish o‘qida bo‘la olmaydi.
Asosiy o‘qning yo‘nalishi
flex-direction xususiyati bilan boshqariladi.
Agar bu xususiyat
row qiymatiga ega bo‘lsa - asosiy o‘q chapdan o‘ngga yo‘nalgan,
agar row-reverse qiymati bo‘lsa,
o‘ngdan chapga. column qiymati
o‘qni yuqoridan pastga yo‘naltiradi, column-reverse qiymati esa
- pastdan yuqoriga.
Asosiy o‘q gorizontal bo‘lsin. Kesish o‘qi qay tomonga yo‘nalgan bo‘ladi?
Asosiy o‘q vertikal bo‘lsin. Kesish o‘qi qay tomonga yo‘nalgan bo‘ladi?
Kesish o‘qi o‘ngga yo‘nalgan bo‘lsin. Bunday holda asosiy o‘q qay tomonga yo‘nalgan bo‘lishi mumkin?
Kesish o‘qi pastga yo‘nalgan bo‘lsin. Bunday holda asosiy o‘q qay tomonga yo‘nalgan bo‘lishi mumkin?
Kesish o‘qi o‘ngdan chapga yo‘nalgan bo‘lishi mumkinmi?
Kesish o‘qi pastdan yuqoriga yo‘nalgan bo‘lishi mumkinmi?
flex-direction xususiyati
row qiymatiga ega bo‘lsin. Asosiy o‘q qay tomonga yo‘nalgan bo‘ladi? Kesish o‘qi qay tomonga yo‘nalgan bo‘ladi?
flex-direction xususiyati
column qiymatiga ega bo‘lsin. Asosiy o‘q qay tomonga yo‘nalgan bo‘ladi? Kesish o‘qi qay tomonga yo‘nalgan bo‘ladi?
flex-direction xususiyati
row-reverse qiymatiga ega bo‘lsin. Asosiy o‘q qay tomonga yo‘nalgan bo‘ladi? Kesish o‘qi qay tomonga yo‘nalgan bo‘ladi?
flex-direction xususiyati
column-reverse qiymatiga ega bo‘lsin. Asosiy o‘q qay tomonga
yo‘nalgan bo‘ladi? Kesish o‘qi qay tomonga yo‘nalgan bo‘ladi?