Кор бо флексбоксҳо дар 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,
баландии волидайнро аз 300px ба
500px зиёд кунем ва нигарем, ки чӣ гуна align-items
дар ин ҳолати чандсатрӣ амал мекунад:
<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;
}
:
Чинон ки мебинем, як чиз гӯё хеле марказкунӣ намешавад. Гӯё ки ҳар сатр худ ба худ дар ҷои муайяншудааш марказкунӣ мешавад. Биёед кунем, ки ҳамаи сатрҳо ҳамчун як воҳиди ягона дар маркази волидайн истода бошанд.
Барои ин бояд хосияти align-content-ро истифода бурд,
ки барои матни чандсатрӣ лозим аст.
Коди худро аз нав нависем:
<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 таъин кунем. Аз он ҷое ки мо се
сатр дорем, ва мувофиқан ду масофа байни
сатрҳо, пас ин масофаҳо ҳар як
ба 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-ро санҷем.
Барои ин баландиро аз фарзандон тоза кунем, ба волидайн
баландиро ба 600px барои бештар
заҳири таъсир таъин кунем.
<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;
}
:
Қимати stretch барои align-content аст
қимати пешфарз. Агар мо баландиро
аз фарзандон комилан тоза кунем, хосияти align-content-ро тоза кунем,
аммо баландии волидайн ва 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-ро ҳам тоза кунем
- ҳама яксатрӣ мешавад:
<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 чизе кор намекунад бигзор мо як сатр дошта бошем:
<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-ро тоза кунем - 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;
}
:
