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 արժեքով,
իսկ յուրաքանչյուր երրորդ երեխա տարրի համար այդ 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 հեռավորությամբ:
