CSS හි flex මත ටයිල් කිරීමේ ගැටළු

ටයිල් කිරීමේ පළමු ගැටළුව පොදුවේ කෙලින්ම පැහැදිලිය - දෙමාපියන්ට විශේෂයෙන් උස නියම කිරීමට සිදුවීම ඉතා අපහසුය. අපට ඇත්ත වශයෙන්ම එවැනි දෙයක් සිදුවිය හැකිය, කොටස් ගණන ගතිකව වෙනස් වන අතර ඒවායේ ගණන 9 ට වඩා අඩු හෝ වැඩි විය හැකිය.

දෙවන ගැටළුව පැන නගින්නේ, අවසාන පේළියේ ප්‍රමාණවත් කොටස් ගණනක් නොමැති විට කොටස් ගණන එවැනි වුවහොත්ය. මෙම අවස්ථාවේ දී, අවසාන පේළිය භයානක ලෙස පෙනෙනු ඇත:

<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-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

එයින් අදහස් වන්නේ, තිරස් අතට පවා space-between අගය අපගේ නඩුවේ දුර්වල ලෙස ක්‍රියා කරන බවයි.

සාරාංශයක්: ඔබගේ ළමයින්ගේ ප්‍රමාණය නිරන්තරයෙන් ස්ථාවර වී ඇති අතර දෙමව්පියන් තුළ සාමාන්‍ය ලෙස ගැලපේ නම්, space-between මත ටයිල් කිරීම තරමක් පහසු දෙයකි. එසේ නොමැති නම්, වෙනත් යමක් සිතාගත යුතුය.

අංක 12 වූ අංග ලබා දී ඇත. පේළියකට අංග 4 ක් ඇති ටයිල් එකක් සාදන්න, එක් එක් අංගයේ පළල 100px සහ ඒවා අතර දුර 20px වේ.

අංක 12 වූ අංග ලබා දී ඇත. පේළියකට අංග 3 ක් ඇති ටයිල් එකක් සාදන්න, එක් එක් අංගයේ පළල 150px සහ ඒවා අතර දුර 10px වේ.