Плица са коректним размацима у 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 за све child елементе,
а затим поништимо тај 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.
