CSS Flexbox

Flexbox – bu CSS layout modeli bo‘lib, elementlarni qator va ustunlarda joylashtirish, ularni markazlashtirish va moslashuvchan qilib boshqarish imkonini beradi. Flexbox orqali murakkab grid’larni oddiy va tez qurish mumkin.

Asosiy Sintaksis

.container {
	display: flex;
}

Flex konteyner ichidagi barcha elementlar flex item hisoblanadi.

Asosiy property’lar

1. flex-direction

Elementlar qaysi yo‘nalishda joylashishini belgilaydi.

.container {
	display: flex;
	flex-direction: row; /* default */
}

Qiymatlar:

• row → chapdan o‘ngga
• row-reverse → o‘ngdan chapga
• column → yuqoridan pastga
• column-reverse → pastdan yuqoriga

2. justify-content

Elementlarni asosiy o‘q bo‘yicha joylashtirish.

.container {
	display: flex;
	justify-content: center;
}

Qiymatlar:

• flex-start (default)
• flex-end
• center
• space-between
• space-around
• space-evenly

3. align-items

Elementlarni kesishuvchi o‘q bo‘yicha joylashtirish.

.container {
	display: flex;
	align-items: center;
}

Qiymatlar:

• stretch (default)
• flex-start
• flex-end
• center
• baseline

4. flex-wrap

Elementlar sig‘may qolsa, yangi qator/ustunga o‘tishi.

.container {
	display: flex;
	flex-wrap: wrap;
}

Qiymatlar:

• nowrap (default)
• wrap
• wrap-reverse

5. align-content

Bir nechta qator bo‘lganda ularni vertikal bo‘yicha joylashtirish.

.container {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}

Flex item property’lari

1. flex

Elementning moslashuvchan hajmi.

.item {
	flex: 1; /* barcha elementlar teng bo‘linadi */
}

Shakli: flex: grow shrink basis;

Misol:

.item1 {
	flex: 1 1 200px;
}
.item2 {
	flex: 2 1 200px;
}

2. align-self

Faqat bitta element uchun align-items.

.item {
	align-self: flex-end;
}

3. order

Elementlarning tartibini boshqarish.

.item1 {
	order: 2;
}
.item2 {
	order: 1;
}

To‘liq Misol

<div class="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
</div>
 
<style>
	.container {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 200px;
		background: lightgray;
	}
 
	.item {
		background: dodgerblue;
		color: white;
		padding: 20px;
		font-size: 20px;
	}
</style>

Natija: uchta element gorizontal markazda joylashadi.

Responsive misol

.container {
	display: flex;
	flex-wrap: wrap;
}
 
.item {
	flex: 1 1 200px;
	margin: 10px;
}

Natija: elementlar ekran o‘lchamiga qarab avtomatik yangi qatordan joylashadi.

Afzalliklari

• Markazlashtirish juda oson.
• Moslashuvchan layout.
• Kod ancha qisqa.
• Responsivlik uchun qulay.

Xulosa

Flexbox – elementlarni tartib bilan joylashtirish va responsive layout yaratish uchun eng kuchli vositalardan biri. Ko‘p hollarda grid bilan birgalikda ishlatiladi.