Плиточка бо фосилаҳои дуруст дар CSS
Биёед як плиточкаи воқеан коригардеро бо истифода аз margin ва бе мушкилот сохтан. Фарз мекунем, ки аввал мо чунин плиточкаеро бе фосила дорем:
<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-wrap: wrap;
width: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Биёед фосилаҳои уфуқиро байни унсурҳо бо истифода аз margin созем.
Барои ин ба ҳама унсурҳои фарзанд margin-right-ро ба қимати 10px таъин мекунем,
ва ба ҳар як фарзанди сеюм ин margin-ро сифр мекунем.
Барои ин аз пешванди класса nth-child истифода мебарем,
дар он параметрро ҳамчун ин таъин мекунем, ки ҳар як унсури сеюм гирифта шавад.
Инчунин паҳноии унсури волидайнро то 320px зиёд мекунем,
то ҷо барои фосилаҳо бидиҳем ва бинем, ки чӣ ба даст овардем:
<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-wrap: wrap;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
margin-right: 10px;
border: 1px solid green;
}
.child:nth-child(3n) {
margin-right: 0;
}
:
Пас, ҳама чиз кор мекунад. Биёед унсури охиринро ҳазв кунем, то дар сафи охир унсурҳои камтар бошад ва боварӣ ҳосил кунем, ки дар ин ҳолат мушкиле бо ин сафи охир надорем:
<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>
.parent {
display: flex;
flex-wrap: wrap;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
margin-right: 10px;
border: 1px solid green;
}
.child:nth-child(3n) {
margin-right: 0;
}
:
Плиточкаеро сохта, ки дар ҳар саф ду унсур бошад ва
фосилаи байни унсурҳо 20px бошад.
