CSSda to'g'ri chekinishli plitkachalar
Keling, haqiqatan ham muammosiz ishlaydigan marginlar yordamida chekinishli plitkachani yasaymiz. Boshlang'ich holatda chekinishlari bo'lmagan shunday plitkachamiz bor deb faraz qilaylik:
<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;
}
:
Keling, elementlar orasidagi gorizontal chekinishlarni
margin yordamida yasaymiz.
Buning uchun barcha child elementlarga
margin-right ni 10px qilib belgilaymiz,
har uchinchi child uchun esa bu margin ni nolga tenglaymiz.
Buning uchun nth-child psevdoklassidan foydalanamiz,
uning parametrini har uchinchi elementni olishimiz
uchun mos qilib qo'yamiz.
Chekinishlar uchun joy ochish maqsadida parent elementning
kengligini 320px ga oshiramiz va natijani ko'rib chiqamiz:
<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;
}
:
Demak, hammasi ishlayapti. Keling, oxirgi qatorda kamroq element bo'lishi uchun oxirgi elementni olib tashlaymiz va oxirgi qator bilan bog'liq muammolar bo'lmasligiga ishonch hosil qilamiz:
<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;
}
:
Har qatorda ikkitadan element bo'lgan, elementlar orasidagi
masofa 20px bo'lgan plitkachani yasang.
