CSSда флексбокслар билан ишлаш
Билганингиздек, justify-content хоссиси мавжуд бўлиб,
у элементларни асосий ўқ бўйлаб тескаради.
Шунингдек, align-items хоссиси ҳам мавжуд бўлиб, у
элементларни кўндаланг ўқ бўйлаб тескаради. Келинг,
унга бир оз ўйнаб кўрамиз.
Ҳозирча блоклар қаторда жойлашган, яъни кўндаланг ўқ
пастга йўналган деб фараз қилайлик. align-items
ёрдамида ушбу блокларни марказга жойлаштирамиз:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Келинг энди яна блоклар қўшайлик, flex-wrap
ёрдамида кўп қatorлиликни қўшайлик, ота-онанинг баландлигини
300px дан 500px га ошириб қўйамиз ва
align-items ушбу кўп қatorли ҳолда қандай ишлашини кўрамиз:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Кўриб turganimizdek, нарсалар жуда яхши марказлашмайди. Гуёки ҳар бир қатор ўзига ajratilgan жойда ўзи марказлашмоқда. Келинг, барча қаторлар бир бутун сифатида ота-онанинг марказига жойлашсин.
Буни амалга ошириш учун align-content хоссисидан
foydalanish керак, у кўп қatorли матн учун мўлжалланган.
Кодимизни қайта ёзайлик:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
align-content хоссиси align-items каби
қийматларни қабул қилади.
space-between қиймати
Мисол учун space-between қийматини кўриб чиқайлик.
Ота-онага 320px баландлик берайлик. Бизда учта
қатор, ва шу sababli қаторлар орасида иккита масофа мавжуд,
у ҳолда бу масофалар ҳар бири 10px га тенг бўлади:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: space-between;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
stretch қиймати
Келинг, stretch қийматини sinab кўрамиз.
Бунинг учун farzandlarning баландлигини олиб tashlaymiz, ота-онага
эса баландликни 600px га aniqroq таъсир учун ўрнатамиз.
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: stretch;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
align-content учун stretch қиймати сустки (default) қийматдир.
Агар биз farzandlarning баландлигини umuman олиб tashlasak, align-content хоссисини олиб tashlasak,
лекин ота-онанинг баландлиги ва flex-wrap ни қолдириб қўйсак - ҳамма нарса худди шу тарзда ишлайди:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
Агар flex-wrap ни ҳам олиб tashlasak
- ҳамма нарса бир қatorли бўлиб қолади:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
Ўқни айлантирамиз
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Максус шартлар
flex-wrap: wrapсиз ҳеч нарса ишламайди, aytaylik бизда битта chiziq мавжуд:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
flex-wrap: wrapни олиб tashlayмиз - align-content: center ишлашни тўхтатади:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
