Flīzes ar pareizām atstarpēm CSS
Izveidosim flīzes ar atstarpēm, izmantojot margin, kuras darbosies bez problēmām. Sākotnēji pieņemsim, ka mums ir flīzes bez atstarpēm:
<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;
}
:
Izveidosim horizontālās atstarpes starp
elementiem, izmantojot margin.
Lai to izdarītu, visiem pēcteču elementiem
iestatīsim margin-right uz vērtību 10px,
un katram trešajam pēctecim iestatīsim šo margin uz nulli.
Izmantosim pseudoklasi nth-child,
iestatot parametru tā, lai iegūtu
katru trešo elementu.
Palielināsim arī vecāka elementa platumu līdz 320px,
lai atbrīvotu vietu atstarpēm, un paskatīsimies,
kas mēs iegūstam:
<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;
}
:
Tātad, viss darbojas. Noņemsim pēdējo elementu, lai pēdējā rindā būtu mazāk elementu, un pārliecināsimies, ka mums nevienā gadījumā neradīsies problēmas ar šo pēdējo rindu:
<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;
}
:
Izveidojiet flīzes ar diviem elementiem katrā rindā un
atstarpi starp elementiem 20px.
