CSS හි ප්ලෙක්ස් මත ටයිල් තැනීම

දැන් අපි ප්ලෙක්ස්බොක්ස් මත ටයිල් තැනීමට ඉගෙන ගනිමු. පළමුවෙන්ම, ප්ලෙක්ස්-කොටු පේළි කිහිපයකට සහ පේළියකට කොටු තුනක් ස්ථානගත කරමු.

මේ සඳහා, ප්ලෙක්ස් වල මාපියයාට පළල 300px සහ flex-wrap අගය wrap ලෙස සකසමු, සහ දරුවන්ට පළල 100px ලෙස සකසමු:

<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;
}

දැන් අපි අපගේ කොටු අතර තිරස් ඈතට කරමු. මේ සඳහා අවකාශ සඳහා අමතර ඉඩක් ලබා දීමට මාපියයාගේ පළල වැඩි කරමු.

අපට පේළියකට කොටු තුනක් ඇති බැවින්, ඒවා අතර හිඩැස් දෙකක් ඇති බව පෙනේ. අපිට අවශ්‍ය නම් සෑම හිඩැසකටම පළල 10px කින් තිබිය යුතුය. මෙයින් අදහස් වන්නේ මාපියයාගේ පළල 20px කින් වැඩි කළ යුතු බවයි, එනම් 300px නොව 320px කළ යුතු බවයි.

දැන් අපි කොටු වල මාපියයාට justify-content space-between ලෙස සකසා අපේක්ෂිත ඈතට ලබා ගනිමු:

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

දැන් අපි කොටු අතර සිරස් ඈතට එකම දුරක් එකතු කරමු. මේ සඳහා අපට align-content ගුණාංගය space-between ලෙස සැකසිය හැක.

කෙසේ වෙතත්, මේ සඳහා මාපියයාට උස සැකසීමට අවශ්‍ය වේ, එසේ නොමැතිව align-content ක්‍රියා නොකරනු ඇත. අපි උස 320px ලෙස සකසමු. මෙම අවස්ථාවේදී, අපට කොටු තුනක් පේළි තුනක් බැගින් උස 100px සහ පේළි අතර ඈතට 10px කින් තබා ගත හැකිය.

අපි දැන් එය ධාවනය කරමු:

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

සියල්ල අපූරුවට ක්‍රියා කරයි, නමුත් ඊළඟ පාඩමේදී අපි සලකා බලන යම් ගැටලු ඇත.