Flexbox bilan tanishuv

CSS Flexbox (moslashuvchan quti maketi)

CSS Flexbox — CSS Flexible Box Layout modulining qisqa nomi.

Flexbox — elementlarni konteyner ichida moslashuvchan va moslashuvchan (responsive) tarzda (gorizontal yoki vertikal) joylashtirish maket modeli.

Flexbox float yoki joylashtirishdan foydalanmasdan moslashuvchan va responsive maket loyihalashni osonlashtiradi.

Element 1

Element 2

Element 3

Element 4

Element 5

O‘zingiz sinab ko‘ring »

Flexbox va Grid solishtiruvi

CSS Flexbox bir o‘lchamli maket uchun ishlatiladi — qatorlar YOKI ustunlar bilan.

CSS Grid ikki o‘lchamli maket uchun ishlatiladi — qatorlar VA ustunlar bilan.

CSS Flexbox komponentlari

Flexbox har doim quyidagilardan iborat:

Flex konteyner — ota (konteyner) element bo‘lib, unda display xossasi flex yoki inline-flex qilib belgilanadi
Bir yoki bir nechta flex element — flex konteynerning to‘g‘ridan-to‘g‘ri bola elementlari avtomatik ravishda flex elementlarga aylanadi

Uch flex elementli flex konteyner

Quyidagi element uch flex elementli flex konteynerni (ko‘k maydon) ifodalaydi.

Element 1

Element 2

Element 3

Misol

Uch flex elementli flex konteyner:

<html>
<head>
<style>
.container {
display: flex;
background-color: DodgerBlue;
}

.container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>

<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

</body>
</html>

O‘zingiz sinab ko‘ring »

Flex konteynerlar va flex elementlar haqida keyingi boblarda batafsil bilib olasiz.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish