Ubao wa Kioo na Vipimo Vilivyosahihi katika CSS
Wacha tutengeneze ubao wa kioo unaofanya kazi bila shida kwa kutumia vipimo vya margin. Tuchukulie tuna ubao wa kioo wa kwanza bila vipimo:
<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;
}
:
Wacha tufanye vipimo vya usawa kati ya
vipengele kwa kutumia margin.
Kwa hili, wacha tuweke kwa kila kipengele cha mwanao
margin-right thamani ya 10px,
na kwa kila mwanao wa tatu tuweke margin huu kuwa sifuri.
Tutatumia dhana ya nth-child,
tukiweka parameta yake ili kupata
kipengele cha tatu kila mara.
Pia tuongeze upana wa kipengele mzazi hadi 320px,
ili kupa nafasi kwa ajili ya vipimo, na tuone
tunachopata:
<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;
}
:
Kwa hiyo, yote yanafanya kazi. Wacha tuondoe kipengele cha mwisho ili safu ya mwisho iwe na vipengele vichache na kuhakikisha kuwa hatatakuwa na shida kwa safu hii ya mwisho:
<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;
}
:
Tengeneza ubao wa kioo wenye vipengele viwili kwa kila safu na
umbali kati ya vipengele ukiwa 20px.
