Коректно подравняване на плочки в CSS
Нека направим работещи без проблеми плочки с отстъпи чрез марджини. Да предположим, че в началото имаме такива плочки без отстъпи:
<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.
