Tegel met korrekte spasies in CSS
Laat ons 'n werklik probleemvrye teel met spasies op marges maak. Kom ons aanvaar ons het aanvanklik so 'n teel sonder spasies:
<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;
}
:
Laat ons horisontale spasies tussen die
elemente maak met margin.
Om dit te doen, laat ons vir alle kindelemente
margin-right instel op die waarde 10px,
en vir elke derde kind hierdie margin na nul stel.
Laat ons die nth-child pseudoklas gebruik,
met die parameter sodat dit
elke derde element kry.
Laat ons ook die ouer se breedte vermeerder na 320px,
om plek vir die spasies te maak, en kyk
wat ons kry:
<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;
}
:
So, alles werk. Laat ons die laaste element verwyder, sodat die laaste ry minder elemente het en maak seker dat ons nie probleme met hierdie laaste ry het nie:
<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;
}
:
Maak 'n teel met twee elemente per ry met
'n afstand tussen elemente van 20px.
